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

 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;}

.imageplaceholder   {position:fixed; left:50%; top: 50%;height:400px; width:400px; background-color: #8B8682; background-image: url cassie_large.jpg)}

.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;}

many thanks in advance

Mar 25 '08 #1

Subscribe Reply

4659

hsriat

1,654

Recognized Expert Top Contributor

This example may help you.

Mar 25 '08 #2

studentofknowledge

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

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

Similar topics

1803

Image creation problem

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 document.write("<img src='marker12.gif' \ id='1' \

Javascript

78173

CSS image "mouseover"

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?

HTML / CSS

13458

Image: MouseOver - MouseOut - OnClick problem

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'">

HTML / CSS

4026

mouseover change image and text color.

by: Amy | last post by:

Javascript

3325

image map test page - won't work in IE6 or FF

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 test case. It's now refusing to work in Firefox either, and I can't see anything wrong with it so...

Javascript

5672

background-image flicker

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 images, one for each state, and having them be background images for text containers, DIVs in this...

HTML / CSS

19501

HTML image map mouseover help

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 using doesn't use JavaScript. Y'all are obviously light-years more knowledgeable then me on html...

HTML / CSS

14256

input type=image + changing image

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:

HTML / CSS

1725

Gridview mouseover change image source

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 = DataControlRowType.DataRow) Then Dim mytext As String = Server.HtmlDecode(e.Row.Cells(8).Text)...

.NET Framework

5363

OnMouseOver and image maps working across multiple images

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 the mapped-out area; I understand that this is quite easy. Some Googling has provided a few...

Javascript

9706

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9584

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10337

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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 captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

7622

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6854

Couldn’t get equations in html when convert word .docx file to html file in C#.

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 into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5654

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4301

transfer the data from one system to another through ip address

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

C# / C Sharp

3822

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2995

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General