CSS Rollovers 1

[d0nny]

I've been trying to find some details on how to create a rollover image using CSS but just about everything I come across involves an anchor link and is in a div.

I suppose I'll be told that's how its done, but here's my conundrum.

I have a fixed size div (350 x 300) which is defined in the stylesheet.
I currently have an image loaded into this div within the HTML page (rather than a background image in the stylesheet).
What I want is when the user rolls the mouse over the image, it changes to another image. So I don'r want/need a link, just a rollover.

Here's my stylesheet:

.workbox1 {
float:    left;
width:    350px;
height:   300px;
background-color:   #EEEEEE;
margin-right:  5px;
margin-bottom: 5px;      
}

And here's my page code:

<div class="workbox1">
<img src="./images/home/<?php echo $workbox1image; ?>" alt="<?php echo $workbox1imagealt; ?>" border="0">
</div>

As you can see, I'm pulling information into this div from a database because the site user wants to update the images from time to time.

Is there any quick way of doing this?

 

[feherke]

Hi

CSS is for decoration. A background image is decoration. CSS can set/change it.

But an image is content. CSS can not set/change it. The same way it can not change paragraphs.

What you can do with CSS is this :

[purple].workbox1[/purple] [teal]{[/teal]
  [blue]float:[/blue] [green]left[/green];
  [blue]width:[/blue] [green]350px[/green];
  [blue]height:[/blue] [green]300px[/green];
  [blue]background-color:[/blue] [green][i]#EEEEEE[/i][/green];
  [blue]background-image:[/blue] [green]url[/green]([green].[/green]/[green]images[/green]/[green]home[/green]/[green]whatever.png[/green]);
  [blue]margin-right:[/blue] [green]5px[/green];
  [blue]margin-bottom:[/blue] [green]5px[/green];      
[teal]}[/teal]
[purple].workbox1[/purple][teal]:[/teal]hover [teal]{[/teal]
  [blue]background-image:[/blue] [green]url[/green]([green].[/green]/[green]images[/green]/[green]home[/green]/[green]different.png[/green]);
[teal]}[/teal]

[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"workbox1"[/i][/green][b]>[/b][red]&nbsp;[/red][b]</div>[/b]

Of course, will not work in Explorer 6. ( Unless you change from [tt]div[/tt] tag to [tt]a[/tt] tag. )

I would say, use JavaScript.

Feherke.

http://rootshell.be/~feherke/

 

[d0nny]

Well, I started looking at Javascript but most of the sites I read about using CSS stated that Javascript was the 'old way' of creating image rollovers, so that's why I started looking at CSS.

But this looks like a good solution.
Will it not work in IE then?

 

[d0nny]

OK, I think I've created a simple solution using Javascript which also allows me to get the image information from my database.

Thanks for the advice.

 

[csphard]

Try this link

Making CSS Rollover Buttons tutorial.

http://www.elated.com/articles/css-rollover-buttons/

Its really good.

Howard