Results 1 to 3 of 3

Thread: Hotspot for description pop-up on mouseover?

  1. #1
    Join Date
    Sep 2012
    Posts
    22
    Thanks
    1
    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): http://www.dynamicdrive.com/dynamici...nslideshow.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!
    Last edited by More2Do; 07-06-2013 at 12:14 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    OK, add this code (highlighted) to your init as shown:

    Code:
    <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>
    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
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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, 08:26 PM

Bookmarks

Posting Permissions

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