Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Show/Hide images on mouseover-mouseout.

Posted on 2006-07-06
6
241 Views
Last Modified: 2007-12-19
Hi,

I am looking for an easy solution to have a layer with a big image show as long as the mouse is over a layer with a small image.
The code should work with all major browsers.

Anybody got a solution?

Thanks!

0
Comment
Question by:Sumukha
  • 4
6 Comments
 
LVL 13

Assisted Solution

by:jrram
jrram earned 75 total points
ID: 17055568
Just use the onmouseover, onmouseout events on the layer with the small image, with a display = 'block' or 'none' on the large layer.
0
 

Author Comment

by:Sumukha
ID: 17055590
Done that, but how do I suppress the big Layer/image before that?
I also guess that images have to be preloaded?

Thanks
0
 

Author Comment

by:Sumukha
ID: 17055645
Got that answer myself... Just hide the layer with the large image.

Anyway... when I move the mouse when it is over the small image/layer, the large one is flickering.
Is there a trick for that?

Thanks
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:Sumukha
ID: 17056131
It seems that the code that I am inserting via DW8 for this is not correct.

Dreamweaver complains about this code:

<p><a href="sample4/index.html"><img src="images/sampleGold100.jpg" width="100" height="80" border="1" onmouseover="MM_showHideLayers('box4','','show')" onmouseout="MM_showHideLayers('box4','','hide')" /></a></p>

and says
The onmouseover attribute of the IMG tag is not supported. [Netscape Navigator 6.0]

Anything else I can use?

Thanks
0
 
LVL 17

Accepted Solution

by:
BogoJoker earned 75 total points
ID: 17056197
Move the onMouseOver from the <img> to the <a>.  Since the <a> encompasses the <img> they are essentially the same thing. =)

Joe P
0
 

Author Comment

by:Sumukha
ID: 17059244
That made it. Thanks!
I just wonder why I am getting errors for Netscape 6, when using the  the 'Show events for Netscape 6' behavior option in DW...?

Thanks
Su
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question