SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast felix08's Avatar
    Join Date
    Mar 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with my Javascript

    Hello,
    I am trying to get this image rollover effect to work. When you roll over the image it should have a box that pops up with a larger image for more detail. Mine pops up but I can't get it to come up again if you mouse off. The larger image should stay popped up while the mouse is on that image. Similar to
    http://www.amywoodthomas.com/room.php. This is my Javascript:

    <script type="text/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,-270] //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 = 400; // 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){

    document.onmousemove=followmouse;

    newHTML = "<div style='padding: 5px; background-color: #cecaa9; border: 1px solid #888;'>"
    newHTML = newHTML + "<div align='center' style='padding: 8px 2px 2px 2px;'>";
    newHTML = newHTML + "<img src='" + imagename + "' border='0'></div>";
    newHTML = newHTML + '</div>';
    gettrailobjnostyle().innerHTML = newHTML;
    gettrailobj().display='inline';
    }

    function hidetrail(){
    gettrailobj().innerHTML = ' ';
    gettrailobj().display='none'
    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.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

    if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
    gettrailobj().display="none"

    else

    gettrailobj().display=""
    gettrailobj().left=xcoord+"px"
    gettrailobj().top=ycoord+"px"

    }

    document.onmousemove=followmouse

    if (displayduration>0)
    setTimeout("hidetrail()", displayduration*1000)

    </script>

    Sorry if I didn't explain that very well.
    This script as is displays the larger image when the mouse is on the smaller image but when you take your mouse off and try to go back to see the larger image it doesn't work, you have to refresh the page for it to come back. Thanks in advance for your help.
    Kimberly Kruse
    Graphic Designer/Web Designer

  2. #2
    SitePoint Enthusiast felix08's Avatar
    Join Date
    Mar 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sorry but I know very little Javascript (if any really) so I am not really sure what you are asking me to do
    Kimberly Kruse
    Graphic Designer/Web Designer


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
  •