Skip navigation

Dreamweaver

Cammy Heggie Calculating status...

Currently Being Moderated

Show Hide Behaviour

Jun 20, 2012 6:15 AM

Tags: #cs5.5 #dreamweaver #javascript #code

I am trying to assign a show hide behavior to my portfolio. I already have an image rollover in place on 15 individual images in a grid, basically a brighter version of the thumbnail when on hover.

What I also want to do is assign a show/hide behaviour to each individual thumbnail as well as the rollover which will show a paragraph about each piece of artwork when hovering over the thumbnail. I can implement the rollover easily enough but when the show hide is added the div I am trying to show just flickers briefly on hover then dissapears...

Any info would get greatly appreciated?

Heggie

408 Views 2 Replies Latest reply: Cammy Heggie, Jun 24, 2012 12:15 PM

Replies

Currently Being Moderated

1. Nancy O.,

Jun 20, 2012 12:53 PM in reply to Cammy Heggie

Report

I already have an image rollover in place on 15 individual images in a grid, basically a brighter version of the thumbnail when on hover.
FYI: You could do this with much less code and only one set of images using CSS opacity.

CSS:

#thumbnail img {opacity: 0.5 }
#thumbnail img:hover {opacity: 1.0}

HTML:

<div id="thumbnail">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>

Anyway, to answer your original question. IMO Show/Hide behaviors work best with onClick event triggers. onMouseover triggers are squirrely especially for touch screen devices.

See demo below, view source to see the code.
http://alt-web.com/DEMOS/Show-Hide-Layers.html

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

|
Mark as:
Currently Being Moderated

2. Cammy Heggie,

Jun 24, 2012 12:15 PM in reply to Nancy O.

Report

Many thanks it worked a treat...

|
Mark as: