CSS - Question About Rollover Images Selection Box

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.

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

Good day all,

I have set up my index page for my site with css rollovers instead of javascript rollovers, and I really like the loading time, the problem that I am having is that when I click on the image rollover link there appears a white box around the image. how can this be avoided?

Please see the link below for what I am trying to explain...

http://www.karmaimports.net/indexcss.htm

thanks in advance...

Brook

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

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

Ok, this is a problem I've never bothered fixing but I'm sure it's something simple. On virtually every horizontal CSS rollover menu I've ever built, IE7 always leaves a tiny artifact of the rollover background color on click. Here's my latest example(I'm using IE8's compat mode, but I've checked this in IE7 itself before): http://tinyurl.com/y6uf4zd
CSS and XHTML are both valid.

Here's the code I always use (but customize for the project):
Code:

#navbar{ 
position:absolute; 
top:162px; 
left:47px; 
width:448px; 
height:26px; 
color:white; 
font-size:.75em; 
} 
#navbar ul{ 
margin:0; 
padding:0; 
color:#FFFFFF; 
white-space:nowrap; 
} 
#navbar li{ 
list-style-type:none;
display:inline; 
} 
#navbar li a{ 
display:block; 
float:left; 
margin-left:8px; 
text-decoration:none; 
padding:.4em .75em; 
color:#FFFFFF; 
} 
#navbar li a:hover{ 
background-color:#CCCCCC; 
}
#navbar a:link, #navbar a:visited{ 
color: #FFFFFF;
text-decoration: none; 
}

Go ahead and click a menu item in FF, and then click one in IE7. It never fails. IE7 always leaves a piece of the hover background-color to the right of the LI element. If you highlight the navbar, they go away... but it's very annoying.

Lemme know where I n00bed.
Thanks all.

Ok ive never really used this effect on any of my designs but i would like to. How do i make a <td> background color change on mouse over with css?? and also how would i align an image to the bottom right or bottom left part of a paragraph, i allready know how to do it to the top right and top left.

thanks in advance.

i have a design which i sliced in photoshop and as per the requirement i had to slice into 5 images and each slice had a different width however the total of the 5 images is 900px and fixed height of 200px

so each of the 5 images have a height of 200px and width with different values which add upt0 900px which is the total width of the photoshop design


i used a center layout page with the wrapper set to 900px, when i used 5 image tags all the images were sitting next to each other except for the last 5th image which was starting in the next line however in the design all should appear next to each other, i total width of the div which holds the images is
900px and also the total width of each images is 900px.


so i created 5 inner divs inside a containing div and i set the width and height of the inner divs based on the width and height of each images and this worked fine


however i tried another method of using 5 img tags inside just 1 div and in the css i mentioned
#div img{
float: left;
}

after i used this method all the images were sitting next to each other as per the design, if i remove float: left; then the last image starts in a new line


any reason why when i was using all 5 img tags with giving float: left the last image was starting in a new line as the total width is 900px

thanks.

hi all ! Im getting image not found errors and I need some help.

Im using this format to load the images for my template

Code:

background:url(../images/date_bg.gif)

The url for my image should be:
http://joomla.mydomain.com/template/mytemplate/images/logo.jpg

but instead Im getting:
http://joomla.mydomain.com/images/logo.jpg

Wich is the correct way to do it? I know the easy way is to just copy the path at the CSS, but if I change the domain or any other setting then it become useless unless I edit it again.

I have an image background in the body, and I like having the content have 85% opacity in this instance, but I don't want the images to be at all transparent.

How can I fix this?

I tried giving the images individual opacity values, and I thought it would work because the opacity was set in the content div, which was lower down on the CSS page than the img divs.

You can check out the page here.

In my ongoing project I am making a complex fixed footer that has downloadable resources. I am placing three social network 64x64 thumbnails linking to those sites side by side.

The question I am conflicted with is should I make the images available in the xhtml mark up between the <li> tags or should I create images in the css as separate divs inside the footer with floating properties so that they line up next to each other?

I know it is a matter of file size vs preference but in this case it seems there would be less code all around by placing it in the <li> tags in the xhtml and styling the <li> as inline rather than creating three separate divs and styling those in the css that goes along with it. Or is there an easier way entirely?

Thanks for your thoughts
LB

I've recently tried to make it so that when you hover over something, another background appeared, and when I tried that, I already had a working Selected Page background, which stopped working when the hovering one was implemented.

The code is:
ul#menu li a:hover
{ color: #FFF;
background: #0066CC url(menu_hover.png) repeat-x;}

ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
background: #1C2c3E url(menu_select.png) repeat-x:}

the code below draws a nice hairline textbox

<input type='text' name='name' style="border:1px solid black; font-size: 10px; font-family: arial">

the colde below draws a nice hairline texarea

<textarea name='msg' rows='10' cols='40' style="border:1px solid black; font-size: 12px; font-family: arial">

but the code below doesn't change anything

<select name='sel' style="border:1px solid black; font-size: 10px; font-family: arial">
<option value='1'>first</option>
<option vakue='2'>second</option>
</select>


Is there a way to remove this ugly shade from a selection menu as it exists for textboxes and textareas?


Thanks for your help!

I am quite new to css and wandering how I can add my Stylesheet selection on the page to a dropdown list so the user can choose his/her theme.

I have the coding worked out for stylesheet selection and cookies saving and stuff just need help on how to display the 3 themes in a dropdwon list instead of 3 merged links on screen.

On my main page atm I have the code:

Code:

<?
include('includes/stylearray.php');
?>

<?
// WRITE OUT SWITCHER LINKS
while(list($key, $val) = each($styleSheets)){
 echo "<a href='styleswitcher.php?SETSTYLE=".$key."'title='".$val["title"]."'>".$val["text"]."</a>";
}
?>

but this just lists them as 3 links, I need them in a dropdown list but cant seem to format it right to do that.

Can anyone point me in right direction about splitting up that setstyle php bit into dropdown list instead of 3 ugly links?

If i have the following html:

PHP Code:
<div id="centre">

<h2>Header</h2>

<p>Lorem ipsum appareat definiebas has eu. Eam consul ancillae ex.</p>

<p> Sumo percipit instructior te mei. Est diceret convenire periculis ad, id vix facilisis sadipscing.</p>

<p>Ei per aeque petentium tincidunt, posse inimicus ad sit.</p>

</div> 





I want to select the first letter within the first <p> element, I've tried to do it using double pseudo-elements:

PHP Code:
 div#centre p:first-child:first-letter
{
   etc.
} 





But this obviously won't work, because the <p> ain't first.

I realise that i could do it very simply by just giving the first paragraph a class, but the use pretty much requires contextual selection,

It seems the equivalent of second:child (which is what i want) will be available in css3,

Even ideas would be great,
Cheers