CSS - Multiple Css Rollover Images

i have a basic html page which includes a number of hyperlinks using jpeg images... essentially <img> tags wrappped in <a> tags.

i want to create a rollover effect with these links so that when a link is highlighted (mouseover) the jpeg image changes to another seperate jpeg impage.

is it possible to do this with html/css and if so how can i do this?

i have read about a method of doing this which combines both the original image (before mouseover) and the mouseover image into one single jpeg and changing the image's x-coordinate using css so that there is no preload/image flicker issues when the link is clicked on, but i'm not sure exactly how to code this.

any help is appreciated.

So, I'm pretty new to all this, and any help is really key.

So, on my site, I have a lot of rollover images. I may be breaking usability rules! The site has a lot of hand drawn elements that are supposed to act as nav. So, we implemented hand drawn nav that changes color when you rollover it.

The problem is that when you click on those rollovers, a big dotted box appears around the selected one... it looks especially tacky if you don't go over to the next page. All of these elements have this box.

Is there a way to tell the browser not to show that selection box??

Hello everyone,

I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT?

Thank you for your replies,


Tomas

Hi ! Me again :P

So this is a simple test i made to try this out. But I ran into a problem. Take a look for yourself:

(view-source for xhtml and css)

http://fotoz.hit.bg/test/menu.html

The problem is that annoying flickering that happens when you roll over. Any ideas how to fix it ?

And most importantly why does it occur?

Thanks!

p.s

I should explain what i wanted to do here. Basicly 1 big background image to the <div>. It will be holding the "over" state of all the buttons. At the same time the <a> elements will be holding images of the "normal" state buttons, and when you hover over them they will disappear and you will see the "hover" state below.

It works but I get the flickering with visibility:hidden and even if i just move the img out of the way

Hey guys,
I'm hoping what I need to do involves only CSS (though, it wouldn't shock me if I needed a lot more!)

Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this:

......1 2 3 //top row (multiples)

1.....1 2 3
2.....2 4 6
3.....3 6 9

Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes.

I can only get one rollover working, with simple 'hover' commands.

I've search for an answer for hours, to no avail.

any suggestions?

And here's a more "code specific" example of the table:

<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>2</td><td>2</td><td>4</td><td>6</td>
</tr>
<tr>
<td>3</td><td>3</td><td>6</td><td>9</td>
</tr>
</table>

Thanks so much guys!

I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

I would really like your help on this been trying to do it for weeks now!!

Cheers

I have split up a huge background image into three much smaller images.

I want one of them to tile horizontally across the top of the page, another to tile vertically down the left side of the page, and the third to be in the topleft corner of the page.

Is there anyway to do this in IE6?

I have tried using multiple containers and the background-position attribute, but have been unable to get it right.

Any ideas?

I want to create a rule which specifies a container, then allows a number of images to be displayed within that container at defined positions (top-left, top-right, bottom-left, bottom-right)

I also want any text placed in the div to wrap around all the images.

here's how far I've got - I've got the images where I want 'em - but the text won't flow around the absolutely positioned elements...

I need the bottom elements to be positioned relative to the BOTTOM of the div as its size will change relative to the length of the text displayed within it...

css code:
#content {
background-color: #99CCFF;
position: relative;
width: 400px;
left: 100px;
top: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
overflow: hidden;
}

#content .imgtopleft
{
top: 0px;
float: left;
padding: 5px;
}


#content .imgtopright
{
top: 0px;
float: right;
padding: 5px;

}

#content .imgbottomleft
{
position:absolute;
bottom: 0px;
left:0px;
float: left;
padding: 5px;
}

#content .imgbottomright
{
position:absolute;
bottom: 0px;
right:0px;
float: right;
padding: 5px;

}

HTML:

<div id="content">
<img src="images/emsmall.gif" class="imgtopleft">
<img src="images/emsmall.gif" class="imgtopright">
<img src="images/emsmall.gif" class="imgbottomleft">
<img src="images/emsmall.gif" class="imgbottomright">
Lorem ipsum...
</div>

http://www.brendanclements.com/UPS/

Code:

@charset "utf-8";
/* CSS Document */
body{
	background-color:#000;
	text-align:center;
	min-width:800px;
	background-image:url(images/lft.jpg), url(images/rht.jpg);
	background-repeat:repeat-y, repeat-y;
	background-position:top left, top right;
}

table{
	background-color:#000;
	border:none;
	border-style:none;
	min-width:800px;
	width:75%;
	margin-left:auto;
	margin-right:auto;
}

td{
	color:#FFF;
	border:none;
	border-style:none;
	text-align:center;
}

WHY WHY WHY WHY!

lol, this is very frustrating. I have 2 background images, one for the left side to repeat down and a mirrored one on the right.

I have done my research, I have tried multiple ways posted online to layer background images to have more than one.

But it won't work. I have verified the background url's which work when there is only one, but not when I try to have two.

I know I could get a workaround with a div but I want to know why this is not working and don't want to make my code more sloppy.

Thank you.

Hi, I have 12 thumbnails, and I want a horizontal scrollbar in the div for the thumbnails

Here's the HTML: Code:

 <table  bordercolor="333333" border="1" cellpadding="8">
<th valign="center">
<p class="productText"> MEET THE PHERMONES</p>
</th>
<tr><td height="75" id="productImages">
<a href="#"><img src="images/products/thumbs/prod1T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod2T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod3T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod4T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod5T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod6T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod7T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod8T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod9T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod10T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod11T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod12T.jpg" border="0"></a>
  </td>
</tr>
<tr>
 <td height="138"><p class="productText">THIS IS A TEXT BOX. WHEN THE USER CLICKS ON ONE <br />
  OF THE ABOVE IMAGES, THIS BOX SHOULD BE FILLED WITH CONTENT SPECIFIC TO THE IMAGE: <br />
IE A DESCRIPTION OF THE IMAGE. </p>
<p>&nbsp;</p>
</td>
</tr>
</table>

Here's the CSS: Code:

#productImages{
float:right;
margin-right: 21px;
postion:absolute;
height:78px !important;
width:300px;
overflow: scroll;
}

Here's the site: http://www.caillouette.com/alpha-dream3/alpha-maschio.html#

Basically I need a horizontal scroller, and not a verticle.
Why are my images stacking vertically instead of horizontally?
thanks

Hello,

I'm looking for some help with this problem and would really appreciate some guidance. I'm teaching myself layout with CSS (just picked up the dummies book, so you can guess my current level) but am currently stumped.

I'm looking to have a header, with a central image and two link images positioned either side. The central image would be exactly centred, with the link images aligning to the sides of the central image: [PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]. As the link images are different widths, I'm unable to simply centre everything in one go, as then the central image is not viewed as exact centre.

I need a way to centre the image and then float the link images to the relevant sides but have it so they align either left or right against the centred image. Also, the centre image height is greater than the link images, so as well as aligning either left or right I'm trying to get them to align to the middle, like this:

Code:

		                    [             ]
----------------[PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]-----------------
                                    [             ]

---- variable empty space depending on browser width

I currently have a div to centre using left-margin: auto; right-margin: auto; text-align: center; and have another div inside this with the centred image. I've also created a left div and right div to contain the link images on either side using the float tag: left/right and aligned left or right, but I don't know where to go from there. I know it's probably simple but I can't seem to find the answer. Any help would be great.


Code:

#header {
    	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}
	
#title {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 400px;
	}
	
#imgleft {
	float: left;
	text-align: right;
	width: 30%
	}
	
#imgright {
	float:right;
	text-align: left;
	width: 30%
	}

<div id="header">
			<div id="imgleft">
			<a href="portfolio.html"><img src="l_portfolio.gif" alt="Portfolio"></a>
			<img src="l_about.gif" alt="About">
			</div>
			<div id="imgright">
			<img src="l_blog.gif" alt="Blog">
			<img src="l_contact.gif" alt="Contact">
			</div>
			<div id="title">
			<img src="title.gif" height="84" width="400" alt="Title">
			</div>
			
		</div>

does anyone know how i can get 4 background images in my table, one for each corner of the table?

they are curved images, as i am aiming for the table to have curved edges.

Thanks

Hello
I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me

I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help.

What I'm trying to do

All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify.
NOTES
The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px.

I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse.

Here is a print screen of the header:

[IMG]URL[/IMG]

Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message.

The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now.

CSS Code
Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that.

Code:

	#myHeader {width:auto;height:133px;
		background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}

 		#myLogo {
				 float:left;
				 width:10%;
				 height:150px	;
				 margin-left:2.22%;
				 display:inline;
				 background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
			   

		#myConame {
				
				width: 15.33%;
				height:90px;
				margin-left:auto;
				margin-right:auto;
				background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
		
		
		#myBanner {
				float:right;
				width: 29.73%;
				height:150px;
				background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}

The HTML Code

Code:

<div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
  <ul>
        <li><a href="http://shuttermaster.co">Home</a></li>
        <li><a href="#">Portfolio</a></li>
		<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
			<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>	
				<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
				<li><a href="Link">Drop 2</a></li>
				<li><a href="Link">Drop 3</a></li>
        </ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
   </li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Guestbook</a></li>
  </ul>
</div> 
</div>
<div style="clear: both;"></div>

I hope I have been clear enough. Hoping someone can point me the right direction.

Regards, and thanks....

Hi,

I have a problem, I can make a rollover on a link with the hover pseudo class easily, and it will work in IE and FF, but I cant do one over a table cell in IE. My code is below, it works as I want in FF, but not IE.

Dom.

Quote:

.nav-cell-main-nonsel {

font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva;
font-size: 10px;
font-weight: normal;
color: #333333;

vertical-align: middle;
text-align: left;
padding: 0px 0px 0px 5px;

background-image: url(../../images/[ps]triangle1.gif);
background-position: left;
background-repeat: no-repeat;

border-bottom: 1px solid #EDEDED;

padding: 0px 0px 0px 20px;

}
.nav-cell-main-sel, .nav-cell-main-nonsel:hover {

font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva;
font-size: 10px;
font-weight: normal;
color: #333333;

vertical-align: middle;
text-align: left;
padding: 0px 0px 0px 5px;

background-image: url(../../images/[ps]triangle2.gif);
background-position: left;
background-repeat: no-repeat;

border-bottom: 1px solid #EDEDED;

padding: 0px 0px 0px 20px;

}




Cheers, Dom.

My website is warriorquest.co.nr and for some odd reason, the css rollovers are working in the latest IE, but not in the latest Firefox. THis is something i never expected, here is my css:
Code:
css

a { text-decoration: none; }
a:link { color:  #0000FF; }
a:active { color:  #C0C0C0; }
a:visited { color: #0000FF; }
a:hover
{
  color:  #0000FF;
  border: 1px solid #0000FF;
  padding: 5px;
  width: 190px;
  background-color: #ffffff;
}
body
{
 color: #ffffff;
 background-color: #2F4F4F;
}
div
{
  margin-top: 50px;
  margin-bottom: 50px;
}

Thx for your help =)

EDIT: it seams i had to completely reload the page, but now they dont display right. THey are supposed to look like in IE, any suggestions?