By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,516 Members | 1,369 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,516 IT Pros & Developers. It's quick & easy.

Image in frame on mouse hover

P: n/a
Hi all,

I am searching for a script which does the following:

I have a frameset with two pages: left and right.
On the left page there is an image map. When I hover the mouse over a
certain area of the image map, I want to appear an image in the right page.
There are more area's on the image map. I want a specific picture to appear,
each one correlated to a specific area. Is there any scrip which can do
this?

Thanks in advance for your help.

With best regards,

Fokke Nauta
Jan 26 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Fokke Nauta wrote on 26 jan 2006 in comp.lang.javascript:
I am searching for a script which does the following:

I have a frameset with two pages: left and right.
On the left page there is an image map. When I hover the mouse over a
certain area of the image map, I want to appear an image in the right
page. There are more area's on the image map. I want a specific
picture to appear, each one correlated to a specific area. Is there
any scrip which can do this?


You could write a script, beste Fokke,
but if there "is" one [where?] I wouldn't know.

In Javascript you can reference other frames like this:

<script type='text/javascript'>
var Imag = parent.otherFrame.document.getElementById('imag')
var ImagOrigSrc = Imag.src
</script>

<...
onmouseover = "Imag.src = '/images/myImg.jpg'"
onmouseout = "Imag.src = ImagOrigSrc"

Not tested.

However, Fokke, why use frames?
Much better use <div>s, classes and and css styles.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jan 26 '06 #2

P: n/a
"Evertjan." <ex**************@interxnl.net> wrote in message
news:Xn********************@194.109.133.242...

<cut>
You could write a script, beste Fokke,
but if there "is" one [where?] I wouldn't know.

In Javascript you can reference other frames like this:

<script type='text/javascript'>
var Imag = parent.otherFrame.document.getElementById('imag')
var ImagOrigSrc = Imag.src
</script>

<...
onmouseover = "Imag.src = '/images/myImg.jpg'"
onmouseout = "Imag.src = ImagOrigSrc"

Not tested.

However, Fokke, why use frames?
Much better use <div>s, classes and and css styles.


Hi Evert Jan,

Thanks for your quick reply.
I will give it a try, although I'm not a javascript programmer.
Initially I wanted to use a frame because I thought this in the only way to
show a picture when hovering over an image map. Obviously there must be
other ways. I have to look into <div>s and classes.
If you have a hint of how to achieve this without using a frame, you are
welcome.

Groeten,
Fokke
Jan 27 '06 #3

P: n/a
Fokke Nauta wrote on 27 jan 2006 in comp.lang.javascript:
Thanks for your quick reply.
I will give it a try, although I'm not a javascript programmer.
Initially I wanted to use a frame because I thought this in the only
way to show a picture when hovering over an image map. Obviously there
must be other ways. I have to look into <div>s and classes.
If you have a hint of how to achieve this without using a frame, you
are welcome.


Frames have nothing to do with it.

<map name="myMap">
<area shape="rect" coords="20,30,650,111" nohref
onMouseOver="toggleImage('imag1.jpg')">
<area shape="rect" coords="....
<area shape="rect" coords="....
<area shape="..." coords="....
</map>

<img src="/images/mapImage.jpg" border="0" usemap="#myMap"
onMouseOut="toggleImage('default.jpg')"
style="position:absolute;right:20px;bottom:50px;">
<imag src='default.jpg' id ='imloc'>
<script ....

function toggleImage(im){
document.getElementById('imloc').src=im
}

not tested, you will have to debug this.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jan 27 '06 #4

P: n/a
"Evertjan." <ex**************@interxnl.net> wrote in message
news:Xn********************@194.109.133.242...
Fokke Nauta wrote on 27 jan 2006 in comp.lang.javascript:
Thanks for your quick reply.
I will give it a try, although I'm not a javascript programmer.
Initially I wanted to use a frame because I thought this in the only
way to show a picture when hovering over an image map. Obviously there
must be other ways. I have to look into <div>s and classes.
If you have a hint of how to achieve this without using a frame, you
are welcome.


Frames have nothing to do with it.

<map name="myMap">
<area shape="rect" coords="20,30,650,111" nohref
onMouseOver="toggleImage('imag1.jpg')">
<area shape="rect" coords="....
<area shape="rect" coords="....
<area shape="..." coords="....
</map>

<img src="/images/mapImage.jpg" border="0" usemap="#myMap"
onMouseOut="toggleImage('default.jpg')"
style="position:absolute;right:20px;bottom:50px;">
<imag src='default.jpg' id ='imloc'>
<script ....

function toggleImage(im){
document.getElementById('imloc').src=im
}

not tested, you will have to debug this.

--


Bedankt, Evertjan.

I'll give it a try!

Best regards,
Fokke
Jan 30 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.