How to apply an inline css image rollover style to an anchor?

joejac 2008-02-04 22:06:00 UTC #1

Hello,

I found this simple image rollover technique for an anchor:

http://www.diamondlime.com/blog/archives/2007/12/awesome-rollovers-with-css-sprites/

Unfortunately I can not use embedded nor external css I am forced to use inline style.

My question is how I do this in an inline style?, please note this do not work, is wrong, but for you to have an idea of what I need to accomplish:

<p><a style="a:link, :visited background: url(’images/image1.jpg top left no-repeat; a:hover, a:active background: url(’images/image1.jpg’) top right no-repeat;" href=”#” title=”Image1”>Image 1</a></p>

Sorry, but I have not found literature nor tutorials to learn how to do this style inline.

I appreciate any help.
Thanks a lot
Regards
joejac

PaulOB 2008-02-04 22:15:01 UTC #2

Hi,

My question is how I do this in an inline style?, please note this do not work, is wrong, but for you to have an idea of what I need to accomplish:

It can't be done I'm afraid.

You can't style pseudo classes like :hover in inline styles because they are intangible characteristics that don't actually exist in the html document.

You can only style them from a css file although the css file could be in the head or external (or will even work inside the body of the page but is invalid) but they cannot be styled using the style attribute inside an html tag.

Your only solution would be to use inline javascript to effect the change.

joejac 2008-02-04 22:26:02 UTC #3

Thanks a lot for your fast response Paul.

Where I can find an inline javascript example to do this?

Regards
joejac

PaulOB 2008-02-04 22:47:18 UTC #4

Hi,

I assume it would be something like this:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<p style="background:url(images/zimg1.jpg) no-repeat" onmouseover="this.style.background = 'url(images/zimg2.jpg) no-repeat';" onmouseout="this.style.background = 'url(images/zimg1.jpg) no-repeat';">This is a test : This is a test</p>
</body>
</html>

But javascript isn't my thing

joejac 2008-02-05 01:46:43 UTC #5

Thanks Paul,

But the anchor is missing, I have tried in many ways and if I include the style in the anchor the image (250x200px) is cropped to the text size. If I do it in a division, the rollover is fine but the link is present only in the text area, not in both: text and images.

I guess I will have to find a javascript image/text rollover, that I do not like.

Regards
joejac

joejac 2008-02-05 03:21:09 UTC #6

Hello Paul,
Please see this link to see what I have done with your solution. If I could have the rollover image with the link also it would be done:

http://www.autogestionweb.com/test/

Do you think it is possible to have the link also in the image, and how?

I also have a little problem with the border of the division "resumenes" in Firefox, it shows the border only around the <h1> and not around all the other divisions inside the containing division "resumenes" Explorer do not have this problem.

Thanks a lot
Regards
joejac

PaulOB 2008-02-05 12:29:08 UTC #7

Hi,

If you want the image as a link then apply that routine to the anchor instead (I would have thought you could have worked that out yourself :)).

<div style="float:right; margin-right:5px; height: 230px">
           [B]     <p><a  href="#" style="display:block;width:250px; height:200px; border: 1px solid black; width:250px; height:200px; background:url(http://www.autogestionweb.com/test/imagenes/PiscinaPortada1.jpg) no-repeat" onmouseover="this.style.background = 'url(http://www.autogestionweb.com/test/imagenes/PiscinaPortada2.jpg) no-repeat';" onmouseout="this.style.background = 'url(http://www.autogestionweb.com/test/imagenes/PiscinaPortada1.jpg) no-repeat';"><span style="position: absolute;   margin: 205px 0px 0px 90px">Piscinas2</span></a></p>[/B]
            </div>

The border is a float clearing issue and you need to clear the floats. This can be done by applying a clearer div as follows.

            </div>
            [B]<div style="clear:both"></div>[/B]
        </div>
    </div>
    <div id="pagination">

Or by adding overflow:auto to resumenes. (#resumenes{overflow:auto}) or by other clearing methods (see faq on floats).

I am wondering why you have to construct your page using only inline styles thought. It seems a bit strange to me?

joejac 2008-02-06 01:45:48 UTC #8

Thanks a lot Paul, your code worked perfect, you are a life saver!.

Sorry, I tried to do it by myself in the anchor but I failed

I was able to adapt diamondlime example (link above) using embedded css (no javascript) inside the body and it worked, but I was unsure to use it this way because I have always seen embedded css inside the head section not inside the body.

I did not know about the issue that the floats do not force the container's bottom edge down, I need to study more css, thanks for the faq on floats.

I need inline not in all the page construction but in certain areas where my little php script provide control for the content. My script do not allow to change css files, just the HTML in certain areas like the one inside the "resumenes" division.

Paul you are very kind to help me with this.
Best regards
joejac

PaulOB 2008-02-06 10:30:09 UTC #9

My script do not allow to change css files, just the HTML in certain areas like the one inside the "resumenes" division.

Ok - I see

joejac 2008-02-09 14:17:20 UTC #10

Hello Paul, I have a couple of questions and I am completely done with this thread.

I have a delay on the mouseover images so is there a way to have preload the images inside the content area? (the area inside resumenes division) I mean somewhere inside this code:

<div class="resumenes">
<div style="float:left; margin-left:6px; margin-top: 10px; height: 230px">
<p><a  href="#" style="display:block;width:250px; height:200px; border: 1px solid black; width:250px; height:200px; background:url(imagenes/PiscinaPortada.jpg) no-repeat; text-decoration: none; color:#0073A4;" onmouseover="this.style.background = 'url(imagenes/PiscinaPortadaOn.jpg) no-repeat';" onmouseout="this.style.background = 'url(imagenes/PiscinaPortada.jpg) no-repeat';"><span style="position: absolute;  font:normal normal normal 12px verdana;  margin: 205px 0px 0px 90px">Piscinas</span></a></p>
</div>

<div style="float:right; margin-right:6px; margin-top: 10px; height: 230px">
<p><a  href="#" style="display:block;width:250px; height:200px; border: 1px solid black; width:250px; height:200px; background:url(imagenes/FuentePortada.jpg) no-repeat; text-decoration: none; color:#0073A4;" onmouseover="this.style.background = 'url(imagenes/FuentePortadaOn.jpg) no-repeat';" onmouseout="this.style.background = 'url(imagenes/FuentePortada.jpg) no-repeat';"><span style="position: absolute;  font:normal normal normal 12px verdana;  margin: 205px 0px 0px 90px">Fuentes</span></a></p>
</div>
</div>

2.- Although using embedded css (no javascript) not in the head but inside the body it worked for me, I would like to know if this is technically possible and correct, or on the contrary it is wrong and against the standards? and if I do it I would have the risk to brake the page in some future browsers versions.

Thanks a lot for your patience and help Paul
Best regards
joejac

PaulOB 2008-02-09 15:04:03 UTC #11

Hi,

Don't know if this will make a difference but you could try applying each image to the background of a spare element.

e.g.

<div class="resumenes">
<div style="float:left; margin-left:6px; margin-top: 10px; height: 230px;[B]background: url(imagenes/PiscinaPortada.jpg) no-repeat -999em -999em">[/B]
<p [B]style="background: url(imagenes/PiscinaPortadaOn.jpg) no-repeat -999em -999em"[/B]><a  href="#" style="display:block;width:250px; height:200px; border: 1px solid black; width:250px; height:200px; background:url(imagenes/PiscinaPortada.jpg) no-repeat; text-decoration: none; color:#0073A4;" onmouseover="this.style.background = 'url(imagenes/PiscinaPortadaOn.jpg) no-repeat';" onmouseout="this.style.background = 'url(imagenes/PiscinaPortada.jpg) no-repeat';"><span style="position: absolute;  font:normal normal normal 12px verdana;  margin: 205px 0px 0px 90px">Piscinas</span></a></p>
</div>

2) Yes is is invalid to do something like this.

</head>
<body>
<div>test</div>
<style type="text/css">
a:hover{background:red}
</style>
<div>test</div>

However, it does work in all the browsers I've tested and indeed most html emails are constructed like this to avoid css being stripped. I'm guessing that it will more than likely work as long as browsers support deprecated and broken mark up which they still seem to be doing. However , there are no guarantees and its not something I would encourage doing unless you have no choice.

If I were you I would be considering changing my CMS as anything that forces you to write code in this manner is not a thoughtful piece of software

joejac 2008-02-09 16:19:44 UTC #12

Thanks a lot Paul!,
Very clever and easy solution, I need to learn to think that way

Please let me know if this last question has to go on other forum and I will change it, but on your CMS observation:

I have a very narrow target, very small organizations, where the assistant or the owner themselves changes the content, they have no technical skills. They will not be able to change styles or more complex things. The majority do not speak English.

They upload images, edit through a WYSIWYG text area editor in 2 content areas and the menu categories, approve, and their content is ready and published on their pages. In the worst case they click to open the HTML code of these areas and change image names, only that.

I have not found a non complex, not bloated with unnecessary features and easy to learn and use CMS.

I visited http://www.opensourcecms.com/ and spent countless days reading reviews and testing some (not all) CMSs and I could not found any with those features that I need.

I also searched on Google, I found a couple Flash CMS, more visual (RIA), nice with some complexity but not much, but very costly. And I do not like Flash for CMS due to usability and SEO constraints.

Do you know about a fast, easy to learn and use CMS that you can suggest me?, something like a simple word processor for the web pages (php/MySql based could be nice, but not a restriction, just because I host in a shared Linux).

Best regards
joejac

PD. By the way, if there is a contest, evaluation or poll about best supporters of these forums let me know, I will give you 5 stars+

PaulOB 2008-02-10 10:02:25 UTC #13

Hi,

For CMS questions you would be better off posting in the same forum as this post is taken from. Obviously things like wordpress would be an obvious choice but I'm not the best one to ask about this.

I avoid getting into those areas and just concentrate on CSS and leave that side of things to the programmers/designers themselves

Hope that's some help anyway

joejac 2008-02-11 12:15:02 UTC #14

Thanks a lot Paul,
I am done with this thread.
Best regards
joejac

system 2014-10-08 00:43:01 UTC #15

ThemesPodcastArticlesPremium