Results 1 to 3 of 3

Thread: Hotspot for description pop-up on mouseover?

  1. #1
    Join Date
    Sep 2012
    Thanked 0 Times in 0 Posts

    Default Hotspot for description pop-up on mouseover?

    1) Script Title: Ultimate Fade-in slideshow (v2.4)

    2) Script URL (on DD):

    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:

    Thank you!
    Last edited by More2Do; 07-06-2013 at 12:14 AM.

  2. #2
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries


    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 = + 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: ""
    Last edited by jscheuer1; 07-06-2013 at 05:01 AM. Reason: code improvement
    - John

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2012
    Thanked 0 Times in 0 Posts


    Thank you so much! Greatly appreciated!

Similar Threads

  1. Background changes colour when mouseover on hotspot and text appears
    By Jay Dog in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 05-08-2013, 10:36 AM
  2. Image Map Mouseover with description
    By crood58 in forum Looking for such a script or service
    Replies: 4
    Last Post: 10-16-2010, 02:09 PM
  3. Replies: 0
    Last Post: 06-14-2010, 03:06 PM
  4. Hotspot Affinities with mage w/ description tooltip
    By AZSAILOR in forum JavaScript
    Replies: 0
    Last Post: 03-20-2008, 04:38 PM
  5. Help+mouseOver images appears description ^^
    By nanakooy in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-18-2005, 09:26 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts