Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Show/Hide images on mouseover-mouseout.

Posted on 2006-07-06
6
Medium Priority
?
245 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
[X]
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
  • 4
6 Comments
 
LVL 13

Assisted Solution

by:jrram
jrram earned 300 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

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 300 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

705 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