x and y coords of an image

[JohnSmith]

Lets say that I have a picture on my html page. Using jscript how can I click on a certain area on the picture and a second image appears.

Example:

My picture on my web page is Windows Explorer. I want to have the user click on the image where the File menu is and once clicked a second image will immediatlety appear with the actual File menu appearing..


How can I do this using jscript?

[Mushroom Realm]

'Place in the head
pic1 = new Image(width,height)
pic2 = new Image(width,height)
pic1.src = "picture1.gif"
pic2.src = "picture2.gif"
'Place in the image tag
onClick = "imgname.src="pic2.src""
onmouseout = "imgname.src="pic1.src""

imgname is the name of the image specified by the name parameter in the image tag. picture1 and picture2 are your images. you can use any variable name in place of pic1 and pic2. If you want to specify the click to a specific are then you need to use an image map (I just finished something just like this ).

[JohnSmith]

Image map ... can you elaborate on this... I want to be able to click on a certain area on the image and then another imagea ppears

[Mushroom Realm]

OK, I think I know of an easy way you can do this, or there is another way. Alright you have your Explorer image. Now make another image that is only the start button, and position it where you need it to be. Then you can use that code in the image tag. If this doesnt work out for you then i'll explain image maps.

[JohnSmith]

Can you send me an exmaple of this??? I still dont quite follow you

[Mushroom Realm]

I'm at school right now but I can post all of my code when I get home. Image mapping is just the map tag. It is used to split the image into clickable regions. For what you want to do you really dont need one. My code is actually for a graphical menu that scrolls down, but its still the same thing.

[JohnSmith]

Can you post me the code... I would really appreciate it...

[Mushroom Realm]

Style Sheet:

img {border:0;position:absolute}
img.news {left:0;top:0}

js File:

news1 = new Image(59,27)
news1.src = "news1.bmp"

Site:

<img class="news" name="news" src="news1.bmp" onmouseover="news.src=news2.src" onmouseout="news.src=news1.src">

[JohnSmith]

Can you post the files with the code... i am alittle lost

[JohnSmith]

Lets say I have picture1 displayed on my html page. When I click on the file menu on that picture1, I want picture2 appear smoothly..

Please find attached two pictures. Help is greatly appreciated..


John

[Mushroom Realm]

Do you want the menu to drop down when it gets clicked or when the mouse runs over it. Either way uses the same code, just a different parameter.