PDA

View Full Version : Hotspot for description pop-up on mouseover?



More2Do
07-05-2013, 11:37 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Greetings! Is it possible to designate a specific hotspot on an image for the description pop-up to appear? Currently, I'm using the slideshow feature on a large image, which is just below the main navigation bar. As a result, the pop-up unintentionally reveals itself when moving the mouse up to the navigation bar. I would like to have a small hot spot in the bottom left corner of the image (see "i" button). Is this possible?

Please see link to website:
http://www.ianzitidesign.com/test/index.html

Thank you!

jscheuer1
07-06-2013, 04:02 AM
OK, add this code (highlighted) to your init as shown:


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "banner_image", //ID of blank DIV on page to house Slideshow
dimensions: [960, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/banner_A.jpg", "", "", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Name Here property in Seattle Washington"],
["images/banner_B.jpg", "", "", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Name Here property in Portland Oregon"],
["images/banner_C.jpg", "", "", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Name Here property in San Francisco California"],
["images/banner_D.jpg", "", "", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Name Here property in Salt Lake City Utah"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
oninit: function(){
var descvis, s = this.setting, $wrap = s.$wrapperdiv, h = $wrap.mousemove(function(e){
var o = $wrap.offset(), x = e.pageX, y = e.pageY, top = o.top + h - 25, left = o.left + 25,
evt = x < left && y > top? 'mouseenter' : y <= top && descvis || !descvis? 'mouseleave' : null;
evt && $wrap.trigger(evt);
descvis = evt !== 'mouseleave';
s.ismouseover = true;
}).mouseleave(function(){descvis = false;}).height();
},
togglerid: ""
})

</script>

More2Do
07-06-2013, 04:45 PM
Thank you so much! Greatly appreciated!