473,545 Members | 2,063 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

image change on mouseover

23 New Member
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;

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 4640
hsriat
1,654 Recognized Expert Top Contributor
This example may help you.
Mar 25 '08 #2
studentofknowledge
23 New Member
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
Mar 25 '08 #3
acoder
16,027 Recognized Expert Moderator MVP
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
studentofknowledge
23 New Member
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
acoder
16,027 Recognized Expert Moderator MVP
You're welcome - glad it's working :)
Mar 31 '08 #6

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

Similar topics

5
1783
by: Jim Buzbee | last post by:
I have a subroutine that inserts image objects into a page for me. It works fine except for one thing. My mouseover settings don't appear to take. i.e. I see nothing at all when I move the mouse cursor over the image. If I replace the object creation code with a plain document.write, it works. : // this works as expected...
8
78166
by: al | last post by:
Hi, I've been trying to create a image mouseOver effect using CSS - is this possible? Or will I have to use DIV tags or something along those lines? I've tried a number of things - the code below will work for the border no problem, but I can't seem to get the SRC to work - is this not an option in CSS?
3
13450
by: John | last post by:
Imagine this: I have a gif-image with text, coloured green. When MouseOver occurs the gif will swap to another gif with red colourded text. On MouseOut the gif turns back to the green text. -----------------This is my code: <a href="nextpage.html" onMouseOver="document.green.src='red.gif'" onMouseOut="document.green.src='green.gif'">
2
4004
by: Amy | last post by:
<style> div.helpBtn{ font:bold 73% verdana; color:#995F8D; text-align:left; width:79px; height:24px; margin:0px; padding: 5px 0px 0px 27px; background: url(/jsp/images/pms/housekeeping/helpBtn_off.gif) no-repeat; } div.helpBtnOn{ font:bold 73% verdana; color:#BB59DE; text-align:left; width:79px; height:24px; margin:0px; padding: 5px 0px 0px...
3
3309
by: lofty00 | last post by:
hello, sorry about the repost - I've been posting to several groups and I've decided it's better to make a single repost to all of them rather than an extra post in each. I've been trying to work out why I can't get the image maps to work in IE6 on a page I'm working on (which is now working in firefox). I've written the page below as a...
3
5657
by: seamlyne | last post by:
The first method I ever used for multiple state buttons was to create a graphic for each button for each state: AboutUs_on, AbooutUs_over, AboutUs_out, etc. That works great when there are just a few buttons. I'm creating interfaces now with many more buttons than "just a few". I solved the maintenance problem by having generic button...
3
19492
by: Annette Acquaire | last post by:
I have and image map with a dozen hotspot links on it that I'm trying to get to open a new image over existing one on mouseover of each COORD. The only thing I was able to do was swap image on mouseover entire image, I want it on each hotspot only, so an image pertaining to each link shows up. I have done it in JavaScript, but the website I'm...
8
14240
by: John | last post by:
Hi Pasrt of HTML - <div class='button'><input type='image' src='/images/check1.jpg'></input></div> Part of CSS - ..button {background-image: url(/images/check1.jpg); background-repeat:
0
1707
by: spacecadet563 | last post by:
I am trying to change and display the image source of an image control (named image2 )on mouseover of cell event on a gridview(Gridview1) with a SQL datasource. The cell contains image name of image in web app directory. The VB code behind I started with is: Protected Sub Gridview1_RowDataBound If (e.Row.RowType =...
13
5340
by: seegoon | last post by:
Hi all. So: I've put together a page, in which I want several clickable image maps. I've put those together already. The problem with image maps is that they're not very intuitive, so users don't really expect the image to be clickable and accordingly won't even try to. The solution is to have the image highlight whenever the mouse travels over...
0
7660
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7813
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7431
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7761
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5337
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4949
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3444
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1888
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1020
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.