40 users online (0 members and 40 guests)  


  Results 1 to 5 of 5

Related

  1. Problem with image rollover and text change    Forum: Javascript Forum
    Replies: 7
  2. Image to Text Rollover    Forum: Website Scripts Forum
    Replies: 0
  3. Image to text menu rollover    Forum: CSS Forum
    Replies: 3
  4. thumbnail to image and text rollover    Forum: Javascript Forum
    Replies: 0
  1. #1
    J_ustinB's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2005
    Posts
    2

    Disjointed rollover (Image to Text)

    I would like to make a disjointed rollover for my website. I am using dreamweaver mx.

    What i would like to do is, as the user scrolls across the image, I would like text to appear next to it


    what i wouldnt want is the text to be an image preferably. If the other option cant be done then i suppose this would have to do.(What would loading times be for this with images and text ) There will be around 30 images which i would like to add this to

    Thanks

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there J_ustinB,

    and a warm welcome to these forums.
    Try this working example, it may give you some ideas...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>tooltip</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <base href="http://coothead.homestead.com/files/"/>
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
         background:#cccccc;
     }
    a {
        font-family:arial;
        font-size:18px;
        color:#000000;
     }
    #foo {
         position:absolute;
         width:230px;
         border:solid 1px #000000;
         background:#c0c0ff;
         padding:5px;
         font-family:verdana;
         font-size:10px;
         text-align:justify;
         display:none;
     }
    #container {
         width:140px;
         border: double 6px #000000;
         background:#ffffff;
         padding:10px;
     }
    .links {
         list-style:none;
         color:#990000;
         margin-top:30px;
     }
    .links img {
         width:50px;
         height:50px;
         border:solid 2px #000;
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    function toolTip(txt,top,left) {
      var el=document.getElementById('foo');
      
      var text=new Array();
      text[0]="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus."+ 
    "Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad"+
    " litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna"+
    " non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc.";
      text[1]="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus."+ 
    "Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad"+
    "l itora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna"+
    " non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc.";
      text[2]="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus."+ 
    "Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad"+
    " litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna"+
    " non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc.";
      text[3]="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus."+ 
    "Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad"+
    " litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna"+
    " non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc."; 
         
         el.innerHTML=text[txt];
         el.style.top=top+"px";
         el.style.left=left+"px";
         el.style.display="block";
      document.onmouseout=function() {
         el.style.display="none";
      }
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <ul>
    <li class="links" onmouseover="toolTip(0,50,185)">
    <img src="anim1.gif" alt="" />
    </li>
    
    <li class="links" onmouseover="toolTip(1,138,185)">
    <img src="anim3.gif" alt="" />
    </li>
    
    <li class="links" onmouseover="toolTip(2,226,185)">
    <img src="anim2.gif" alt="" />
    </li>
    
    <li class="links" onmouseover="toolTip(3,314,185)">
    <img src="anim.gif" alt="" />
    </li>
    </ul>
    
    </div>
    
    <div id="foo"></div>
    
    </body>
    </html>
    
    coothead

  3. #3
    J_ustinB's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2005
    Posts
    2
    I do not know very much code if any at all. I already have my page set out i have built around 5 pages now> what sahll i do with this code as some of the parts ar repated in my site already

    Thanks

    Justin

  4. #4
    aquamon1's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2005
    Posts
    1

    nice job

    great script!
    I didn't want you to think your kindness was wasted. - It wasn't.

  5. #5
    smweb23's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    1

    Re: Disjointed rollover (Image to Text)

    is there a way to put an image in as the rollover instead of the text?

    thanks

    seth



Tags for this Thread