473,224 Members | 1,540 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,224 software developers and data experts.

Image in frame on mouse hover

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
4 8109
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
"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
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
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Roger Shrubber | last post by:
I have a page with images that the user can drag from one frame to another. I need them to see a "ghost image" of the image they are dragging, while the original stays put. I use the onmousemove...
33
by: Thomas Mlynarczyk | last post by:
Hi, I'm looking for a way to put a 1px solid border around the image in this link: <a href="some.html"><img src="some.gif"></a> Well, that, by itself, is simple. However, I would like to have a...
6
by: killerkatt | last post by:
I am new to CSS and would like to know if there is a way to make this happen with CSS: image1 and image 2 are laid out at the top of the page. when the mouse hovers over image1, a paragragh or...
2
by: Pamel | last post by:
I currently have a page that has 6 images in a row. Using javascript, when the mouse goes over one of the images, a word is placed below the images. Each image has a different word. I am trying...
8
by: JLahm | last post by:
I have defined a class for my images called .image that specifies the default border color, width and style. I'd like to be able to have the pseudo elements link, visited and active have one color...
2
by: Kevin Lyons | last post by:
Hello, Can anyone assist me with what I am trying to do with the following code (six different scenarios to try to make the functionality work correctly)? I want to always (and ONLY) display...
7
by: fredo | last post by:
I've studied Eric Meyer's pure css popups, version two: http://meyerweb.com/eric/css/edge/popups/demo2.html which pops up an image when I roll over a text link. Now I want to pop up a large...
7
by: Cate Archer | last post by:
I want to have a border around an image that changes color when the mouse hovers over it. The following code works perfectly in FireFox but not in Internet Exploiter. The text link changes color...
5
by: studentofknowledge | last post by:
hi guys im new to javascript and need some guidence please.. im trying to display a 400x400 pixel coloured area in the middle of a webpage that stays in the middle with a browser window resize....
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.