PDA

Click to See Complete Forum and Search --> : Can someone help......

seifer
06-16-2003, 09:11 AM
Hi

I am a relative beginner in web design (I know HTML and thats all) and I was wondering if someone could help me with some script for my page. I have some scripts on my site at the moment but someone else wrote them for me!

What I would like to do:

I have an image at the top of the page which could be changed by using a dropdown menu.

The section of html i'm using is:

<img src="????.jpg" alt="?????" name="one">
<P>
<select>
<opton onClick="function1">1
</select>

1)Is this about what I need to do?
2)Is there any chance that one of you nice people could help me to write the "function1" bit, bearing in mind i can't write javascripts very well ;)

Thanx

Mike

michaelATgeocacheuk.com
Jona
06-16-2003, 09:46 AM
Hey Mike, first of all that isn't what you need to do. You should use onChange of the SELECT element. There is no onClick attribute of the OPTION element. Below is a small script that I made to help you get started:


<script type="text/javascript">
<!--
function chngImg(img){
if(img!=null){document.images["one"].src=img;}
}
//-->
</script></head>
<body>
<div style="text-align:center;">
<img src="image_one1.jpg" name="one">
</div>
<form action="" name="myForm"><div>
<select name="sel" onChange="chngImg(this.options[this.options.selectedIndex].value);">
<option value="null" selected>Choose one:</option>
<option value="image_one2.jpg">Second Image</option>
<option value="image_one3.jpg">Third Image</option>
</select>
</div></form>
</body></html>


Of course, the above code is set for the HTML 4.01 Strict DTD and thus is invalid XHTML 1.1.

Jona
khaki
06-16-2003, 01:19 PM
hi Mike....

before you scratch a hole in your head...

change this:
<img src="image_one1.jpg">

to this:
<img src="image_one1.jpg" name="one">

(gotta look out for each other, y'know :) )

;) k
seifer
06-16-2003, 02:21 PM
Originally posted by khaki
change this:
<img src="image_one1.jpg">

to this:
<img src="image_one1.jpg" [B]name="one">



Thanx (I inadvertantly already did that anyway!)

I managed to get it working......http://harrypotter.1accesshost.com/bk1index.html

My site is currently in "development" (so it's not quite finished yet! ;))

Mike
Jona
06-16-2003, 02:24 PM
Just wondering, did you want to preload those images?

Jona
seifer
06-16-2003, 02:29 PM
Originally posted by Jona
...did you want to preload those images?


sorry for being stupid......but what's that??????

mike
Jona
06-16-2003, 02:33 PM
So that the person doesn't have to wait for each image to download as they view the images; but instead all of the images load while the page loads and are already loaded when the user goes to view a different one.

Jona
seifer
06-16-2003, 02:38 PM
that would be pretty cool to do........how d'ya do it :D :D :D

Mike
Jona
06-16-2003, 02:42 PM
What did I just get myself into? :rolleyes:


<script type="text/javascript">
<!--
//preload images
var image_one2 = new Image();
image_one2.src = "image_one2.jpg";
var image_one3 = new Image();
image_one3.src = "image_one3.jpg";
//Add as many as you need
function chngImg(img){
if(img!=null){document.images["one"].src=img.src;}
}
//-->
</script></head>
<body>
<div style="text-align:center;">
<img src="image_one1.jpg" name="one">
</div>
<form action="" name="myForm"><div>
<select name="sel" onChange="chngImg(this.options[this.options.selectedIndex].value);">
<option value="null" selected>Choose one:</option>
<option value="image_one2">Second Image</option>
<option value="image_one3">Third Image</option>
</select>
</div></form>
</body></html>


Jona