x and y coords of an image

Printable View

Feb 26th, 2003, 02:25 PM
JohnSmith

x and y coords of an image

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?
Feb 26th, 2003, 02:52 PM
Mushroom Realm
VB Code:
```
'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:) ).
Feb 26th, 2003, 02:54 PM
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
Feb 26th, 2003, 03:01 PM
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.
Feb 26th, 2003, 03:07 PM
JohnSmith

Can you send me an exmaple of this??? I still dont quite follow you
Feb 26th, 2003, 03:27 PM
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.
Feb 26th, 2003, 03:31 PM
JohnSmith

Can you post me the code... I would really appreciate it...
Feb 26th, 2003, 04:38 PM
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">
Feb 26th, 2003, 04:44 PM
JohnSmith

Can you post the files with the code... i am alittle lost
Feb 26th, 2003, 05:26 PM
JohnSmith

1 Attachment(s)

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
Feb 28th, 2003, 04:23 PM
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.