Display Image on Mouseover

**codingbeginner** · 05-20-2008, 11:59 PM

I am really having trouble (as my name suggests) with making a code that will display an image when i mouseover another image. I want this new image to be displayed like a title attribute.

Any thoughts?

**bakerc** · 05-21-2008, 02:16 AM

Hi

Do you just want text to increase in size or have a picture attached? Little unsure as you say you want it to display like a title attribute?

The text, text-color, background-color (and background picture) can be altered on mouseover using CSS
you may find the links below useful
http://www.oreillynet.com/pub/a/java...rollovers.html

http://www.webcredible.co.uk/user-fr...-buttons.shtml

but if you want anything more than that I belive javascript would be needed.

**lynnema** · 05-21-2008, 11:55 AM

I'm also not really sure what you want to do, but I've created a lot of image rollovers using the so called "sliding doors" method - you can see what I did here: www.jessweiss.com/webdesign.html. Basically, you create an image with two halves and have it switch to the opposite half when you rollover. If you google "sliding doors" and css, you will find a ton of information. Hope that helps.

**bakerc** · 05-21-2008, 12:51 PM

You can do the same for three images (well, 1 image with 3 parts to it), you can change the image to align left, middle or right in the div so you can have normal, rollover and active.

**LadynRed** · 05-21-2008, 02:54 PM

Try this solution: http://meyerweb.com/eric/css/edge/popups/demo2.html

**lynnema** · 05-21-2008, 08:28 PM

Quote:

Originally Posted by LadynRed

Try this solution: http://meyerweb.com/eric/css/edge/popups/demo2.html

That is SO COOL! I can't wait to use it!

**LadynRed** · 05-21-2008, 08:42 PM

I did use it a couple of years ago - you can see it here:
http://www.dallasmedicalspecialists.com/doctors.htm
Hover your mouse over the names

- they loved it.. the same effect is on the main menu

**codingbeginner** · 05-21-2008, 09:45 PM

I apologize for my lack of clarity so i have found an example, if you hover over one of the images, a decorated alt tab will appear and this is exactly what i am looking for (and yes i have already tried getting the code from the source, didnt work

)http://www.addictinggames.com/index.html

**Kirtan** · 05-22-2008, 08:43 AM

Hope this helps...

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pop up</title>
<meta name="generator" content="Bluefish 1.0.7"/>
<meta name="author" content="N. Venkat Raj"/>
<meta name="date" content="2008-05-22T18:09:11+0530"/>
<meta name="copyright" content=""/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
<style type="text/css">
a.popup {
position: relative;
}

a.popup span {
display: none;
}

a.popup:hover span {
position: absolute;
top: 2em;
left: 0;
width: 100px;
padding: 10px;
display: block;
border: 3px solid #ccc;
background: #5f0;
}

/* Don't expect to write standards code for IE. ;) */
a.popup:hover {
  font-size: 100%;
}
</style>
</head>
<body>
<h1>You are looking to make a popup!</h1>
<p>Move Your Mouse <a href="#" class="popup">Over Me<span>Here goes your popup message</span></a></p>
</body>
</html>

Demo
http://logodesignfactory.co.in/popup.html

**LadynRed** · 05-22-2008, 09:38 AM

I gave you a solution, it can easily be adapted to do exactly what you referred to. You're just going to have to do some WORK to implement it.

**codingbeginner** · 05-22-2008, 09:30 PM

thanks for all your help guys