Solved

PICTURES  OnClick

Posted on 1998-07-15
10
284 Views
Last Modified: 2012-08-13
I like to know  how to get  "my picture" with OnClick function on the input button.
any help?

abusrbin
0
Comment
Question by:abusrbin
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 8

Expert Comment

by:jbirk
ID: 1266589
can you be more specific so we can better help you?

What input button?
and what's "my picture"?
0
 

Author Comment

by:abusrbin
ID: 1266590
I am sorry,

I like to have "grey " button" on my page, and when I click on it
I should see picture (any picture, my picture,  ..the picture I 've
chosen ) It must be java, not link conection.
Can you provide the source code ?

thanks
abusrbin
0
 
LVL 8

Expert Comment

by:jbirk
ID: 1266591
Did you want that picture to pop up into another window, or onto the same page that the button is on?
-Josh
0
 

Author Comment

by:abusrbin
ID: 1266592
Both

thanks
abusrbin
0
 
LVL 1

Accepted Solution

by:
Bluemoon earned 120 total points
ID: 1266593
I dont know how you selected the pictures but i assume you have the name of the picture in a variable, or you have a list(array) of picture-names somewhere hidden on your page

make a function showpicture that looks somewhat like this

<SCRIPT> <!--
function showpicture() {
document.images[0].src = <value of the variable that contains the picurename>
document.frames[1].images[0].src = <value ...>
return true;
} -->
</SCRIPT>

the line will be:
<INPUT type=reset OnClick="showpicture()" name=button value="Show the Picture">

----------------------------
I wil work out some possibilitys (i haven't tested them, but they'll give you an idea)

simple:
<INPUT type=text name=inputfield value="..\my_picture.gif" size=30>
document.image[0].src = document.form.inputfield.value

littlebit difficult dropdown-lists ( simular for radio-buttons or check-boxes)
<SELECT NAME="gimmie" SIZE="1">
<OPTION>First Picture
<OPTION>Second Picture
<OPTION>Next Picture
</SELECT>

function showimage() {

 if (document.form.gimmie.options[1].selected)
    document.image[0].src='first_picure.gif'
 if (document.form.gimmie.options[2].selected)
    document.image[0].src='second_picure.gif'
 if (document.form.gimmie.options[3].selected)
    document.image[0].src='next_picure.gif'
}

****
anouther neat way to do this is by using the SelectedIndex and an Array

<SCRIPT>
mypicsArray = new Makearray(3)

mypicsArray[1].src = "first_picure.gif"
mypicsArray[2].src = "second_picure.gif"
mypicsArray[3].src = "next_picure.gif"

function showpicture() {
   document.images[0].src=mypicsArray[document.form.gimmie.selectedIndex]
}

function MakeanArray(n) {
                  this.length = n
                  for (var i = 1; i<=n; i++) {
                          this[i] = new Image()
                          }
                  return this
            }

<!-- --></SCRIPT>

<SELECT ..../SELECT> ** same as above


Well is't a littlebit mixed up, but with a littlebit puzzeling you should be able to compleet this task.

Greetings Bluemoon
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:abusrbin
ID: 1266594
I'll grade you excellent if you provide working samples for this, somewhere on the net,
with source code.

best regards
abusrbin
0
 
LVL 28

Expert Comment

by:sybe
ID: 1266595
What about this:

<input type="image" src="MyPicture.gif" onClick="MyFunction()">

This will show your image in stead of the default button.
0
 
LVL 28

Expert Comment

by:sybe
ID: 1266596
I am aware that my comment is something completely different then what others give as an answer, but I am not exactly sure what you want, so i thought it might be this.
0
 

Author Comment

by:abusrbin
ID: 1266597
hi, Sybe,
I want completely opposite solution. When I click on the "grey buton", the picture
should appear on the same page.

regs
abusrbin
0
 
LVL 1

Expert Comment

by:Bluemoon
ID: 1266598
Wel alright here is the 'working' script on adres:
http://freud.et.tudelft.nl/~mud/Q/bluemoon/Bluemoon.html

For those who want to read it:
<HTML>
<HEAD><TITLE>Picture select page</TITLE>
<SCRIPT language="JavaScript"><!--

function Showpicture() {
    if (document.form.selection[0].checked)
       document.theimage.src='4.gif'
    if (document.form.selection[1].checked)
       document.theimage.src='5.gif'
    if (document.form.selection[2].checked)
       document.theimage.src='6.gif'
}                                                                              

<!-- --></SCRIPT><BODY>
<FORM name=form>
<INPUT type=radio name=selection value=1 checked>a four<BR>
<INPUT type=radio name=selection value=2>a five<BR>
<INPUT type=radio name=selection value=3>a six<BR>
<INPUT type=button name=changer OnCLick="Showpicture()"
       value="Show the picture">
<IMG name="theimage" src="4.gif">
</BODY>
</HTML>
</HEAD>

0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now