471,896 Members | 2,080 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,896 software developers and data experts.

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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<title>Test 1</title>
<link rel="stylesheet" href="stylesheet.css">
<div class="root">
<div class="imageplaceholder">IMAGE GOES HERE</div>
<div class="header"></div>
<div class="main">
<div class="footer">
<div class="rightcontent">
<a class="text2" href="www.google.com">Powered by "company name goes here"</a></div>
below is my stylesheet so far;

Expand|Select|Wrap|Line Numbers
  1. body                {margin: 0; padding: 10px; background-color: #E5E5E5}
  2. .root           {margin: auto; height: 800px; width: 800px; font-family: tahoma; border-width: 1px;   border-color: #8B8989;  border-style: solid;}
  3. .imageplaceholder   {position:fixed; left:50%; top: 50%;height:400px; width:400px; background-color: #8B8682; background-image: url cassie_large.jpg)}
  4. .header           {height: 100px; background-color: #CD2626}
  5. .main               {float: left; width: 800px; height: 670px; background-color: white}
  6. .content            {margin: 17px; margin-top: 0px; margin-bottom: 12px; margin-left: 6px; margin-right: 4px; font-size: 10px; font-family: Tahoma;} 
  7. .content a:hover    {font-family: Tahoma, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #FFFFFF; text-decoration: underline; }      
  8. .footer             {float: left; height: 30px; background-color: #CD2626}      
  9. .rightcontent       {float: right; padding: 5px; font-family: Tahoma; font-size: 11px; color: white;}
  10. a                       {text-decoration: none}
  11. .text1:hover        {font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: white; text-decoration: underline;}
  12. .text2                 {color: white; text-decoration: none}
  13. .text2:hover        {color: black; font-family: Tahoma, Helvetica, sans-serif; font-size: 11px; font-weight: normal}  
  14. b             {position: relative; top: 117px; left: 50px; margin-top: 0; font-size: 14px; font-family: Tahoma; color: #white;}
  15. h1              {padding: 18px 20px; margin-top: 0; font-size: 22px; font-family: Tahoma; color: #800080;}
  16. h2                     {padding: 0px 24px; margin-top: 0; font-size: 16px; font-family: Tahoma; color: #800080;}
  17. h3                     {padding: 0px 24px; font-size: 12px; font-weight: bold; font-family: Tahoma; color: #000000;}
  18. h4                     {padding: 0px 24px; font-size: 11px; font-family: Tahoma; font-weight: normal; color: #000000;}
  19. h5                      {margin-right: 6px; margin-left: 6px; margin-top: 5px; margin-bottom: 5px; font-size: 11px; font-family: Tahoma; font-weight: bold; color: #FFFFFF;}
  20. h6                  {margin-right: 6px; margin-left: 6px; margin-top: 5px; margin-bottom: 5px; font-size: 11px; font-family: Tahoma; font-weight: bold; color: #800080;}
many thanks in advance
Mar 25 '08 #1
5 4472
1,654 Expert 1GB
This example may help you.
Mar 25 '08 #2
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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function mouseOver()
document.b1.src ="cassie_small.jpg";
function mouseOut()
document.b1.src ="cassie_large.jpg";
<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!" src="cassie_small.jpg" name="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
any ideas ? many thanks in advance
Mar 25 '08 #3
16,027 Expert Mod 8TB
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!
Mar 26 '08 #4
it works! thank you very much for all your help and I will be sure to use the code tags in future :)
Mar 30 '08 #5
16,027 Expert Mod 8TB
You're welcome - glad it's working :)
Mar 31 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Jim Buzbee | last post: by
8 posts views Thread by al | last post: by
2 posts views Thread by Amy | last post: by
3 posts views Thread by seamlyne | last post: by
3 posts views Thread by Annette Acquaire | last post: by
8 posts views Thread by John | last post: by
reply views Thread by YellowAndGreen | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.