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

4655

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

1799

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

78170

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

13453

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

4025

mouseover change image and text color.

by: Amy | last post by:

Javascript

3321

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

5669

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

19498

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

14251

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

1721

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

5357

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

8995

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

8832

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

9378

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

9331

The easy way to turn off automatic updates for Windows 10/11

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 most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8250

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6798

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

3316

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

2791

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

2216

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