41 users online (1 members and 40 guests)  


  Results 1 to 8 of 8

Related

  1. Image to Text Rollover    Forum: Website Scripts Forum
    Replies: 0
  2. Image to text menu rollover    Forum: CSS Forum
    Replies: 3
  3. rollover text change    Forum: CSS Forum
    Replies: 3
  1. #1
    Lucky's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    1

    Problem with image rollover and text change

    I am trying to create an image that when on MouseOver, text on a different part of the page, that is also same link, will appear as if it is being rolled over as well. PLEASE help.... I dont have much hair left from pulling it out... heheeh

    -Lucky

  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 Lucky,

    And a big welcome to these forums
    Check my pic and you will see that I do not have any hair to pull out
    Try this and see if any of it suits your purpose....
    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>multi rollover</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    #foo {
        position:absolute;
        top:30%;
        left:40%;
     }
    
    #coot {
        position:absolute;
        top:50%;
        left:10%;
        display:none;
     }
     
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    function rollOverImage(obj){
       obj.src="your_image2.jpg";
        document.getElementById("foo").innerHTML="Now this has changed too";
         document.getElementById("coot").style.display="block";
          document.onmouseout=function(){
         obj.src="your_image1.jpg";
        document.getElementById("foo").innerHTML="This is ready for change";
       document.getElementById("coot").style.display="none";
      }
     }
     
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="foo">
    This is ready for change
    </div>
    
    <div id="coot">
    This was hidden away
    </div>
    
    <div>
    <img src="your_image1.jpg" alt="" onmouseover="rollOverImage(this)"/>
    </div>
    
    </body>
    </html>
    coothead

  3. #3
    Axe's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2006
    Posts
    2

    Re: Problem with image rollover and text change

    Coothead I love you. Have been searching for hours trying to find this for a project.
    Cheers.

  4. #4
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: Problem with image rollover and text change

    Axe, first allow me to welcome you to the forums .

    These forums exist because of coothead and many others like him, who from the goodness of their heart share their knowledge freely. Though a question might only be asked by a single member, some threads are viewed thousands of times and may actually help literally hundreds or thousands of webmasters

    It means alot to me that you took the time to register just to say thanks to Coothead, and I am sure it means even more to him. Coothead and all of the other allstars (and those on their way to becoming AHFB allstars) are most certainly deserving of it.

    Dave
    AHFBWEB Less customers per server, more power for you!

    Business Class Shared Hosting

  5. #5
    Axe's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2006
    Posts
    2

    Re: Problem with image rollover and text change

    All much appreciated.
    Link to my project below, code's a bit messy, but the image & text swapping is going well.
    http://babylon.massey.ac.nz/~st15/

  6. #6
    fallentothefloor's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Posts
    1

    Re: Problem with image rollover and text change

    Hey Coothead.

    That little bit of javascript is quite nice, I have tried to do something similar with built in Dreamweaver Javascript's but to no avail. I have a bunch of thumbnails that on mouseover should image swap and change the text of a title, on click they change the title permanently to the new title and change a viewer image. It sounds more complex than it really is. I hope you can help with this!

    For a preview of what I mean (it doesn't function how I would like) please visit my website (versionthree.ca) and place /building/portfolio.html after versionthree.ca.

    Thanks!

  7. #7
    senorita's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2011
    Posts
    1

    Re: Problem with image rollover and text change

    Hi,

    i know this is an old thread... but i hope someone could help me... as i am learning designing and very new to it...

    i have 5 different product in my page and 1 div area where text (product description has to change according to the picture the mouse roll over or click...

    can anyone help me with that?

    thanks.

  8. #8
    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

    Re: Problem with image rollover and text change

    Hi there senorita,

    and a warm welcome to these forums.

    I would suggest that you start a new thread for your problem.

    To allow us to solve your problem, could we see the five images
    and the information to be displayed for each?



Tags for this Thread