SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: hover window

  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hover window

    I was wondering if any one could point me in the right direction to achieve the hover window effect at http://www.istockphoto.com/file_browse.php

    Is this just a simple modal popup?

    Thanks in advanced

  2. #2
    SitePoint Addict darkwater23's Avatar
    Join Date
    Nov 2005
    Location
    Omaha, NE
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like the script is available on another site.

    /*
    Simple Image Trail script- By JavaScriptKit.com
    Visit http://www.javascriptkit.com for this script and more
    This notice must stay intact
    */

    The script it self is at http://www.istockphoto.com/js/filesearchhover.js

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    javascript.com

  4. #4
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I finally figured out how to get all the parts to work together! It's a customized version of the followmouse script from JavascriptKit.com.

    In case anyone is interested...

    The Javascript:

    /*
    Simple Image Trail script- By JavaScriptKit.com
    Visit http://www.javascriptkit.com for this script and more
    This notice must stay intact
    */

    var offsetfrommouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
    var displayduration=0; //duration in seconds image should remain visible. 0 for always.
    var currentimageheight = 270; // maximum image size.

    if (document.getElementById || document.all){
    document.write('<div id="trailimageid">');
    document.write('</div>');
    }

    function gettrailobj(){
    if (document.getElementById)
    return document.getElementById("trailimageid").style
    else if (document.all)
    return document.all.trailimagid.style
    }

    function gettrailobjnostyle(){
    if (document.getElementById)
    return document.getElementById("trailimageid")
    else if (document.all)
    return document.all.trailimagid
    }


    function truebody(){
    return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function showtrail(imagename,title,description,showthumb,height){

    if (height > 0){
    currentimageheight = height;
    }

    document.onmousemove=followmouse;

    newHTML = '<div style="padding: 5px; background-color: #FFFFFF; border: 1px solid #888888;">';
    newHTML = newHTML + '<h2>' + title + '</h2>';
    newHTML = newHTML + description + '<br/>';

    if (showthumb > 0){
    newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;">';
    newHTML = newHTML + '<img src="' + imagename + '" border="0"></div>';
    }

    gettrailobjnostyle().innerHTML = newHTML;
    gettrailobj().visibility="visible";

    }

    function hidetrail(){
    gettrailobj().visibility="hidden"
    document.onmousemove=""
    gettrailobj().left="-500px"

    }

    function followmouse(e){

    var xcoord=offsetfrommouse[0]
    var ycoord=offsetfrommouse[1]

    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
    var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

    //if (document.all){
    // gettrailobjnostyle().innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
    //} else {
    // gettrailobjnostyle().innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
    //}

    if (typeof e != "undefined"){
    if (docwidth - e.pageX < 380){
    xcoord = e.pageX - xcoord - 400; // Move to the left side of the cursor
    } else {
    xcoord += e.pageX;
    }
    if (docheight - e.pageY < (currentimageheight + 110)){
    ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
    } else {
    ycoord += e.pageY;
    }

    } else if (typeof window.event != "undefined"){
    if (docwidth - event.clientX < 380){
    xcoord = event.clientX + truebody().scrollLeft - xcoord - 400; // Move to the left side of the cursor
    } else {
    xcoord += truebody().scrollLeft+event.clientX
    }
    if (docheight - event.clientY < (currentimageheight + 110)){
    ycoord += event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
    } else {
    ycoord += truebody().scrollTop + event.clientY;
    }
    }

    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
    var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
    if(ycoord < 0) { ycoord = ycoord*-1; }
    gettrailobj().left=xcoord+"px"
    gettrailobj().top=ycoord+"px"

    }


    The CSS:

    #trailimageid
    {
    font-size: 0.75em;
    position: absolute;
    visibility: hidden;
    left: 0px;
    top: 0px;
    width: 400px;
    height: 0px;
    z-index: 100;
    }

    And finally the actually image with an optional link:

    <a href="">
    <img src="ist1_2026497_hazy_view_from_the_top.jpg" alt="Hazy View From the Top" width="110" height="83" border="0" onmouseover="showtrail('ist2_2026497_hazy_view_from_the_top.jpg','Hazy View From The Top','Hazy View From The Top','1',270);" onmouseout="hidetrail();" />
    </a>

  5. #5
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Image Trail script well explained by radiohalo5

    Thanks mate. This excellent. I was looking so many articles and forums about this topic . Non of them have not explained properly .


    You have done great job. Even some one new to web/java script can get work this script following the steps you have mention.

    Well done mate. Thanks a lot

  6. #6
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is anyone else having trouble getting this code to work in IE and Safari? If so, what is the solution?

    Thanks in advance.

  7. #7
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello radiohalo5,

    Thanks for the script...it works great in IE and Firefox, however, in Safari (I'm using version 3.2.1) the trailing image stays in a fixed position when using multiple thumbnails for a group of different images...in my case I have about 12 thumbnails grouped in fours on the page.

    Any fixes?

    Thanks!!!


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
  •