Image in frame on mouse hover

[Fokke Nauta]

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

 

[Evertjan.]

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.

 

[Fokke Nauta]

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

 

[Evertjan.]

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.

 

[Fokke Nauta]

Fokke Nauta wrote on 27 jan 2006 in comp.lang.javascript:


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