image change on mouseover

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • studentofknowledge
    New Member
    • Mar 2008
    • 23
    #1

    image change on mouseover

    hi guys

    im new to javascript and need some guidence please..

    im trying to display a 400x400 pixel coloured area in the middle of a webpage that stays in the middle with a browser window resize.

    Within the area, i would like to display an image and some text, overriding a few words with an inline style.

    i would like the image to change once the mouse is placed over it. and when the mouse is removed from the image the image should revert to the original.
    below is my html so far..

    [HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>Test 1</title>
    <link rel="stylesheet " href="styleshee t.css">
    </head>
    <body>
    <div class="root">
    <div class="imagepla ceholder">IMAGE GOES HERE</div>
    <div class="header"> </div>
    <div class="main">
    </div>
    <div class="footer">
    <div class="rightcon tent">
    <a class="text2" href="www.googl e.com">Powered by "company name goes here"</a></div>
    </div>
    </div>
    </body>
    </html>
    [/HTML]
    below is my stylesheet so far;

    [CODE=css]body {margin: 0; padding: 10px; background-color: #E5E5E5}
    .root {margin: auto; height: 800px; width: 800px; font-family: tahoma; border-width: 1px; border-color: #8B8989; border-style: solid;}
    .imageplacehold er {position:fixed ; left:50%; top: 50%;height:400p x; width:400px; background-color: #8B8682; background-image: url cassie_large.jp g)}
    .header {height: 100px; background-color: #CD2626}
    .main {float: left; width: 800px; height: 670px; background-color: white}
    .content {margin: 17px; margin-top: 0px; margin-bottom: 12px; margin-left: 6px; margin-right: 4px; font-size: 10px; font-family: Tahoma;}
    .content a:hover {font-family: Tahoma, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #FFFFFF; text-decoration: underline; }
    .footer {float: left; height: 30px; background-color: #CD2626}
    .rightcontent {float: right; padding: 5px; font-family: Tahoma; font-size: 11px; color: white;}
    a {text-decoration: none}
    .text1:hover {font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: white; text-decoration: underline;}
    .text2 {color: white; text-decoration: none}
    .text2:hover {color: black; font-family: Tahoma, Helvetica, sans-serif; font-size: 11px; font-weight: normal}
    b {position: relative; top: 117px; left: 50px; margin-top: 0; font-size: 14px; font-family: Tahoma; color: #white;}
    h1 {padding: 18px 20px; margin-top: 0; font-size: 22px; font-family: Tahoma; color: #800080;}
    h2 {padding: 0px 24px; margin-top: 0; font-size: 16px; font-family: Tahoma; color: #800080;}
    h3 {padding: 0px 24px; font-size: 12px; font-weight: bold; font-family: Tahoma; color: #000000;}
    h4 {padding: 0px 24px; font-size: 11px; font-family: Tahoma; font-weight: normal; color: #000000;}
    h5 {margin-right: 6px; margin-left: 6px; margin-top: 5px; margin-bottom: 5px; font-size: 11px; font-family: Tahoma; font-weight: bold; color: #FFFFFF;}
    h6 {margin-right: 6px; margin-left: 6px; margin-top: 5px; margin-bottom: 5px; font-size: 11px; font-family: Tahoma; font-weight: bold; color: #800080;}[/CODE]

    many thanks in advance
    Last edited by acoder; Mar 26 '08, 03:02 PM. Reason: Added code tags
    Tags: None
    • hsriat
      Recognized Expert Top Contributor
      • Jan 2008
      • 1653
      #2
      This example may help you.

        Comment

        • studentofknowledge
          New Member
          • Mar 2008
          • 23
          #3
          thank you for your reply - i have tried adapting the code but it doesnt seem to work whilst browsed locally from my machine...

          [HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Untitl ed Document</title>
          </head>
          <script type="text/javascript">
          function mouseOver()
          {
          document.b1.src ="cassie_small. jpg";
          }
          function mouseOut()
          {
          document.b1.src ="cassie_large. jpg";
          }
          </script>
          <body>
          <a href="http://www.w3schools.c om" target="_blank" >
          <img border="0" alt="Visit W3Schools!" src="cassie_sma ll.jpg" name="b1" width="26" height="26" onmouseover="mo useOver()" onmouseout="mou seOut()" /></a>
          </body>
          </html>
          [/HTML]
          any ideas ? many thanks in advance
          Last edited by acoder; Mar 26 '08, 03:02 PM. Reason: Added code tags

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Have you checked that the images are in the same directory? If the images are just smaller/larger versions, you may need to remove the height/width attributes of the img tag.

              Please use [code] tags when posting code. Thanks!

                Comment

                • studentofknowledge
                  New Member
                  • Mar 2008
                  • 23
                  #5
                  it works! thank you very much for all your help and I will be sure to use the code tags in future :)

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      You're welcome - glad it's working :)

                        Comment

                        Previous template Next
                        Working...