SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text rollover with an ImageFlip

    I want to add an image flip to a site I'm working on.

    I can do a dual image flip; However, I don't want to use images for my links, instead I want textbased navigation.

    On the homepage I want text links that cause an image flip onMouseOver.

    The images will be descriptive of where the link leads, the links themselves will be simple text links.

    I can do a simple text rollover, I do a single image flip, I can even do a dual image flip, but I can't figure out how to do the text rollover with an image flip.

    It's driving me nuts!

    It seems like it would be a simple task; However, I'm stuck.

    I can one image to flip up for the first link, but when I add a second, the second image pops up and covers the first one, so what's happening is, the images are just loading when the page loads without waiting for the mouse event.

    I'm using the same function{ as for the single image flip, but I think I need to create a hybrid that's somewhere between the single flip and the dual flip.

    has anyone ever done a text rollover with an image flip?

    Any tips are more than welcome.

    Thanks.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    // preload the mouseover image
    var MyImgONE=new Image();
    MyImgONE.src='http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg';
    var 
    MyImgTWO=new Image();
    MyImgTWO.src='http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg';
    var 
    objAry=new Array();

    function 
    Flip(obj,imgobj,img){
    // record the MouseOut image
     
    obj.out=document.getElementById(imgobj).src;
    // attach a MouseOut function to restore the image
     
    obj.onmouseout=function(){ document.getElementById(imgobj).src=this.out; }
    // change the image
     
    document.getElementById(imgobj).src=img;
    }

    //-->
    </script>
    </head>

    <body>

    <a href="http://www.vicsjavascripts.org.uk" onmouseover="javascript:Flip(this,'ImgONE',MyImgONE.src);" >TEXT ONE</a>
     <img id="ImgONE" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="50"><br>
    <a href="http://www.vicsjavascripts.org.uk" onmouseover="javascript:Flip(this,'ImgTWO',MyImgTWO.src);"  >TEXT TWO</a>
     <img id="ImgTWO"  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="50"><br>
    </body>

    </html> 

  3. #3
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text link Rollover with an Image Flip

    Thanks for your reply vwphillips

    That's similar to what I want to do, without the initial image, and each image will appear in the same place.

    What I want to do is have a left side text link nav. bar, with white space to the right.

    When the user mouses over a link, an image appears in the white space, and stays there until they mouseover another link.

    Their could be an initial image, perhaps a logo or something at load time, and it would change according to the link they mouse over.

    I think it would work, if I use a for loop to cycle through the links/images, and position the image in a div.

    I've been looking into doing it with CSS, and assigning the images to classes included in the hrefs.

    If I use JavaScript, theirs always the possibility that the user will have it disabled, so all they would get is the links with a lot of white space on the page.

    Right now I have it set up to change the link text to a discription when they mouseover.

    Like this.

    <style type="text/css">


    a.menu:link {color: blue;
    text-decoration: none;}

    a.menu.:visited {color: blue;
    text-decoration: none;}

    a.menu:hover {color: green;
    text-decoration: underline;
    background-color: ;}

    a.menu:active {color: orange;
    text-decoration: none;}

    </style>


    <ul>
    <li><a href="linkone.html"
    class="menu" onMouseOver="this.innerHTML = 'Click Here For More Information On Link One'"
    onMouseOut="this.innerHTML = 'Link One'">Link One</a>
    <br><br>
    <li><a href="linktwo.html"
    class="menu" onMouseOver="this.innerHTML = 'Click Here For Complete Information On Link Two'"
    onMouseOut="this.innerHTML = 'Link Two'">Link Two</a>
    <br><br>
    <li><a href="linkthree.html"
    class="menu" onMouseOver="this.innerHTML = 'For Complete Information On Link Three Click Here'"
    onMouseOut="this.innerHTML = 'Link Three'">Link Three</a>

    </ul>


    It doesn't quite have the affect that an image does.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    </
    head>

    <
    body>
    <
    style type="text/css">


    a.menu:link {colorblue;
    text-decorationnone;}

    a.menu.:visited {colorblue;
    text-decorationnone;}

    a.menu:hover {colorgreen;
    text-decorationunderline;
    background-color: ;}

    a.menu:active {colororange;
    text-decorationnone;}

    </
    style>

    <
    table width="600" cellpadding="0" cellspacing="0" border="1">
      <
    tr>
        <
    td width=300 >
    <
    ul>
    <
    li><a href="linkone.html"
    class="menu" onMouseOver="this.innerHTML = 'Click Here For More Information On Link One';;document.getElementById('Image').src='http://www.vicsjavascripts.org.uk/StdImages/One.gif';"
    onMouseOut="this.innerHTML = 'Link One'">Link One</a>
    <
    br><br>
    <
    li><a href="linktwo.html"
    class="menu" onMouseOver="this.innerHTML = 'Click Here For Complete Information On Link Two';document.getElementById('Image').src='http://www.vicsjavascripts.org.uk/StdImages/Two.gif';"
    onMouseOut="this.innerHTML = 'Link Two'">Link Two</a>
    <
    br><br>
    <
    li><a href="linkthree.html"
    class="menu" onMouseOver="this.innerHTML = 'For Complete Information On Link Three Click Here';document.getElementById('Image').src='http://www.vicsjavascripts.org.uk/StdImages/Three.gif';"
    onMouseOut="this.innerHTML = 'Link Three'">Link Three</a>

    </
    ul>
        </
    td>
        <
    td><img id="Image" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=150 height=150 ></td>
      </
    tr>
    </
    table>

    </
    body>

    </
    html

    best to preload mouseover images as procedure in my first responce

  5. #5
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just like that.

    I knew it was so simple that I was overlooking it.

    Thanks vwphillips


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
  •