PDA

View Full Version : Inline image change on hover



YeeP
Oct 14th, 2009, 04:13 PM
I am setting up an html sprites setup. Here are the two images.
7842 7843

The grey one is working how I want it too, I just have been unable to make the hover work. Here are the code examples.

css:

.connect-mod .png { float: left; margin-bottom: 8px; margin-right: 5px; background-repeat: no-repeat; height: 16px; width: 16px; clear: both; }

This is the entire line of html code, just to try and help understand what I am dealing with.

<div class="connect-mod"><div class="png" style="background-position: 0 0; background-image: url(images/stories/connectgrey.png)"><img src="images/blank.png" alt="image" /></div> <span>{line1}</span><br /><div class="png" style="background-position: 0 -16px; background-image: url(images/stories/connectgrey.png)"><img src="images/blank.png" alt="image" /></div> <span>{line2}</span><br /><div class="png" style="background-position: 0 -32px; background-image: url(images/stories/connectgrey.png)"><img src="images/blank.png" alt="image" /></div> <span>{line3}</span><br /><div class="png" style="background-position: 0 -48px; background-image: url(images/stories/connectgrey.png)"><img src="images/blank.png" alt="image" /></div> <span>{line4}</span><br /></div>


Here is the shortened example of what I am testing the change on:

<div class="connect-mod"><div class="png" style="background-position: 0 0; background-image: url(images/stories/connectgrey.png)"><img src="images/blank.png" alt="image" /></div> <span>{line1}</span><br />

I changed the html to:

<div class="connect-mod"><div class="png" style="background-position: 0 0; background-image: url(images/stories/connectgrey.png); :hover{background-image: url(images/stories/connectcolor.png)}"><img src="images/blank.png" alt="image" /></div> <span>{line1}</span><br />

That did not work, so I tried this:

<div class="png" style="{background-position: 0 0; background-image: url(images/stories/connectgrey.png)} :hover{background-position: 0 0; background-image: url(images/stories/connectcolor.png)}">

This also did not work, in fact, I lost the grey image in addition. Any ideas would be much appreciated. :thumbsup:

YeeP
Oct 14th, 2009, 04:33 PM
Hmm, That does seem like a good idea. Does it make it even more complicated if I tell you that this is in an ini file in which I am setting up a macro for the user? Here is the example of the TRUE entire line of code. Maybe this will make it more clear as to why I am trying to do it in all html/css inline. After I get this working, I plan on adding a macro inline for the user to enter a url for the image to link to.

example:

[connect line1="{line1}" line2="{line2}" line3="{line3}" line4="{line4}" /]=<div class="connect-mod"><div class="png" style="background-position: 0 0; background-image: url(images/stories/connectgrey.png)"><img src="images/blank.png" alt="image" /></div> <span>{line1}</span><br /><div class="png" style="background-position: 0 -16px; background-image: url(images/stories/connectgrey.png)"><img src="images/blank.png" alt="image" /></div> <span>{line2}</span><br /><div class="png" style="background-position: 0 -32px; background-image: url(images/stories/connectgrey.png)"><img src="images/blank.png" alt="image" /></div> <span>{line3}</span><br /><div class="png" style="background-position: 0 -48px; background-image: url(images/stories/connectgrey.png)"><img src="images/blank.png" alt="image" /></div> <span>{line4}</span><br /></div>

So in this example, the user would put:

[connect line1="Twitter" line2="Facebook" line3="Email" line4="Phone" /]


EDIT: All the ini does is reference html code. I do not see why I could not reference javascript. I am just not sure how to do this. It is above my skills. (sorry)
I guess I would put that javascript in the head of the header?

grahamy84
Oct 14th, 2009, 05:02 PM
Sorry YeeP I deleted my previous message as I thought you just wanted the code for an image rollover.

If I'm right, then how about you go to photoshop, slice your images and put 4 image rollovers on each lined image. i.e. an image rollover for your twitter button, one for facebook etc.

YeeP
Oct 14th, 2009, 05:13 PM
Sorry YeeP I deleted my previous message as I thought you just wanted the code for an image rollover.

If I'm right, then how about you go to photoshop, slice your images and put 4 image rollovers on each lined image. i.e. an image rollover for your twitter button, one for facebook etc.

I can try that. I did see you deleted it and wondered if I made you mad or something. Is there an advantage to doing it that way as opposed to using a sprite?

EDIT: Do you think the inline hover methods I put above would work if they were individual images?

grahamy84
Oct 14th, 2009, 05:19 PM
I can try that. I did see you deleted it and wondered if I made you mad or something. Is there an advantage to doing it that way as opposed to using a sprite?

EDIT: Do you think the inline hover methods I put above would work if they were individual images?

Yep, they'll work fine.

It would be the same as designing an image based nav bar using photoshop. I'm sure it'll look great too.

YeeP
Oct 14th, 2009, 05:30 PM
Yep, they'll work fine.

It would be the same as designing an image based nav bar using photoshop. I'm sure it'll look great too.

10-4, working on it now. I will post back with a link when it is "complete".

Thanks for the help.

gulfsprite
Oct 14th, 2009, 05:30 PM
Your inline hover isn't working the way you are writing it. Seperate the styles from the html and it will work. Putthe style part into your document header.

See example:

<style type="text/css">
.connect-mod div {float: left; margin-bottom: 8px; margin-right: 5px; height: 16px; width: 16px;}

.twitter {background:url(connectgrey.png) 0 0 no-repeat;}
.twitter:hover {background:url(connectcolor.png) 0 0 no-repeat;}

.facebook {background:url(connectgrey.png) 0px -16px no-repeat;}
.facebook:hover {background:url(connectcolor.png) 0px -16px no-repeat;}

.email {background:url(connectgrey.png) 0px -32px no-repeat;}
.email:hover {background:url(connectcolor.png) 0px -32px no-repeat;}

.im {background:url(connectgrey.png) 0px -48px no-repeat;}
.im:hover {background:url(connectcolor.png) 0px -48px no-repeat;}
</style>

<div class="connect-mod">
<div class="twitter"></div>
<div class="facebook"></div>
<div class="email"></div>
<div class="im"></div>
</div>

YeeP
Oct 14th, 2009, 05:47 PM
Your inline hover isn't working the way you are writing it. Seperate the styles from the html and it will work. Putthe style part into your document header.

See example:

<style type="text/css">
.connect-mod div {float: left; margin-bottom: 8px; margin-right: 5px; height: 16px; width: 16px;}

.twitter {background:url(connectgrey.png) 0 0 no-repeat;}
.twitter:hover {background:url(connectcolor.png) 0 0 no-repeat;}

.facebook {background:url(connectgrey.png) 0px -16px no-repeat;}
.facebook:hover {background:url(connectcolor.png) 0px -16px no-repeat;}

.email {background:url(connectgrey.png) 0px -32px no-repeat;}
.email:hover {background:url(connectcolor.png) 0px -32px no-repeat;}

.im {background:url(connectgrey.png) 0px -48px no-repeat;}
.im:hover {background:url(connectcolor.png) 0px -48px no-repeat;}
</style>

<div class="connect-mod">
<div class="twitter"></div>
<div class="facebook"></div>
<div class="email"></div>
<div class="im"></div>
</div>


I am not real familiar with ini(s), I can define that in the ini itself? I do like the idea. It seems I can do the style definition in the css also.

YeeP
Oct 14th, 2009, 07:09 PM
I must be doing something wrong. CSS file that is being used for the classes in this file reads:

connect-mod { margin-top: 10px; margin-left: 15px; }
.connect-mod .png { float: left; margin-bottom: 8px; margin-right: 5px; background-repeat: no-repeat; height: 16px; width: 16px; clear: both; }
.connect-mod span { float: left;}

/*Attempt at hover effect*/
.connect-mod div {float: left; margin-bottom: 8px; margin-right: 5px; height: 16px; width: 16px;}
.twitter {background:url(images/stories/connectgrey.png) 0 0 no-repeat;}
.twitter:hover {background:url(images/stories/connectcolor.png) 0 0 no-repeat;}

.facebook {background:url(connectgrey.png) 0px -16px no-repeat;}
.facebook:hover {background:url(connectcolor.png) 0px -16px no-repeat;}

.email {background:url(connectgrey.png) 0px -32px no-repeat;}
.email:hover {background:url(connectcolor.png) 0px -32px no-repeat;}

.phone {background:url(connectgrey.png) 0px -48px no-repeat;}
.phone:hover {background:url(connectcolor.png) 0px -48px no-repeat;}
/*End attempt*/

Short test section of code is:

<div class="connect-mod"><div class="twitter"></div> <span>{line1}</span><br />

Also, can I put an href in the twitter class that will only use the image as the link?


EDIT:
In my "dream" I would have something like this in the macro definition:

[connect line1="{line1}" url1="{url1}" line2="{line2}" url2="{url2}" line3="{line3}" url3="{url3}" line4="{line4}" url4="{url4}"/]

Then the html would look like

<div class="connect-mod"><div class="twitter"><a href ="{url1}"</div> <span>{line1}</span><br />

The line part of the macro works fine, so it is really just a question/problem of me not knowing how to make the css/html work.


EDIT2: If there is any curiosity of how this looks, here is an image. Ignore the twitter image being gone, that is because I am playing with that part of the code.
7845

YeeP
Oct 14th, 2009, 10:14 PM
CSS now reads:

.connect-mod div {float: left; margin-bottom: 8px; margin-right: 5px; height: 16px; width: 16px;}
.twitter {background:url(images/stories/connectgrey.png) 0 0 no-repeat;}
.twitter a:hover {background:url(images/stories/connectcolor.png) 0 0 no-repeat;}
.twitter a:link {background:url(images/stories/connectcolor.png) 0 0 no-repeat;}

HTML:

<div class="connect-mod"><div class="twitter"></div> <span>{line1}</span><br />..........</div>(..... = old stuff)
My problem has to be in the html.
Something needs to be in the <div class="twitter"></div> element. I think that is why this is not working.

Can anyone please help me?

YeeP
Oct 16th, 2009, 06:58 PM
Ok I have this working now. I am not sure if there is a cleaner way to do it, but this does work. I will post it in hopes to help anyone trying to do it in the future.


CSS

a.twitter {float: left; margin-bottom: 8px; margin-right: 5px; background-repeat: no-repeat; height: 16px; width: 16px; clear: both; background-image: url(/images/stories/twittergrey.png); text-decoration:none;}
a.twitter:hover {float: left; margin-bottom: 8px; margin-right: 5px; background-repeat: no-repeat; height: 16px; width: 16px; clear: both; background-image:url(/images/stories/twittercolor.png); text-decoration:none;}


HTML:

<a href="#" class="twitter"><img src="images/blank.png" height="16" width="16" alt="image" style="border-style:none"/></a>

Not sure if there is a cleaner way, if so, let me know! :thumbsup: