Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Javascript Mouseover Event To Display & Hide Divs

Featured Replies

Hi,

 

I need to display information about links, and the way i've gone about it is by using the mouseover event to display the div, and the mouseout event handler to hide the div. However, its not entirely how I'd like it to be. I don't want the div to disappear on mouseout, but only when I mouseover another link, with the new links information displayed. I tried removing the onmouseout event but that meant the divs never disappeared.

 

the webpage is: Visit My Website

 

or here is the necessary code:

 

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>


<a href="wedding.html" onMouseOver="setVisibility('sub1', 'inline');" onMouseOut="setVisibility('sub1','none');"><img src="images/pageheaders/products/product_wedding3.jpg"border="0" title="Click Here To See Designs"/></a>


<div id="sub2" style="width:410px; height:375px; float:left; display:none" class="style6">
<div style="width:420px; height:100px; vertical-align:top; float:left"></div>
Greeting Cards
<p>Each design shown is hand made. Envelopes are included.</p>
<p>I also design and make party invitations, Christmas cards and announcement cards, so please get in touch to arrange any order, large or small.</p>
</div>

 

any help/advice

 

thanks

is this any use to you place in javascript

 

<img src="../assets/jst_image.jpg" alt="blabla" name="your_image_goes_here" width="100" height="100" class="image_right" id="image" onmouseover="MM_swapImage('large_image','','../assets/large_image.jpg',1)" />

this is a script from my website for a disjointed image swap from my website it as no image restore on mouse out have a look at

 

http://www.directtropicalfish.co.uk/gallery/gallery.html if i wanted the image to swap back then you would need to add image restore on mouse out

 

there is a few picktures there and takes time to download there is a preload image behavior added to the other pages so it speeds the process up if you

 

go to www.directtropicalfish.co.uk and wait a few seconds before going to gallery then images will be already there

hope this helps

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.