PDA

View Full Version : CSS - Change image when mouse is over - GREAT!

MaR?
09-10-2009, 05:09 AM
Hello!,

I want to make my "reply.gif" buttom change when mouse is over.

I find a tutorial... a great one... but when I put the code on my "showthread" template, not work... maybe someone can help me.

Just need to see how insert this code around the image:


<ul id="nav">

<li><a class="EXAMPLE" href="SOMEWHERE" title="ANYTHING">?????</a></li>
</ul>



Im attaching a .rar file: inside you can find a .html with his .css where you can see what Im talking about.



MY SHOWTHREAD


<td class="smallfont"><a href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$FIRSTPOSTID" rel="nofollow"><if condition="$show['closethread']"><img src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]" border="0" /><else /><img src="$stylevar[imgdir_button]/threadclosed.gif" alt="$vbphrase[closed_thread]" border="0" /></if></a></td>
<else />
<td class="smallfont">&nbsp;</td>
</if>
<if condition="$show['pagenav']"><td align="$stylevar[right]">$pagenav</td></if>
</tr>
</table>
<!-- / controls above postbits -->
<!-- toolbar -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center" style="border-bottom-width:0px">
<tr>
<td class="tcat" width="100%">
<div class="smallfont">
<if condition="$show['firstunreadlink']">
<a href="$firstunread"><img class="inlineimg" src="$stylevar[imgdir_button]/firstnew.gif" alt="$vbphrase[view_first_unread]" border="0" /></a>
<a href="$firstunread"><strong>$vbphrase[view_first_unread]</strong></a>
</if>
&nbsp;
</div>
</td>
<td class="vbmenu_control" id="threadtools" nowrap="nowrap">
<a href="$show[nojs_link]#goto_threadtools"<if condition="is_browser('ie')"> accesskey="3"</if>>$vbphrase[thread_tools]</a>
<if condition="$show['popups']"><script type="text/javascript"> vbmenu_register("threadtools"); </script></if>
</td>
<if condition="$show['search']">
<td class="vbmenu_control" id="threadsearch" nowrap="nowrap">
<a href="$show[nojs_link]#goto_threadsearch">$vbphrase[search_this_thread]</a>
<if condition="$show['popups']"><script type="text/javascript"> vbmenu_register("threadsearch"); </script></if>
</td>
</if>
<if condition="$show['threadrating']">
<td class="vbmenu_control" id="threadrating" nowrap="nowrap">
<a href="$show[nojs_link]#goto_threadrating"><span id="threadrating_current"><if condition="$show['rating']">$vbphrase[rating]: <img class="inlineimg" src="$stylevar[imgdir_rating]/rating_$thread[rating].gif" alt="<phrase 1="$thread[votenum]" 2="$thread[voteavg]">$vbphrase[thread_rating_x_votes_y_average]</phrase>" border="0" /><else />$vbphrase[rate_thread]</if></span></a>
<if condition="$show['popups']"><script type="text/javascript"> vbmenu_register("threadrating"); </script></if>
</td>
</if>
<if condition="$vboptions['allowthreadedmode']">
<td class="vbmenu_control" id="displaymodes" nowrap="nowrap">
<a href="$show[nojs_link]#goto_displaymodes">$vbphrase[display_modes]</a>
<if condition="$show['popups']"><script type="text/javascript"> vbmenu_register("displaymodes"); </script></if>
</td>
</if>
<if condition="$show['inlinemod']">
<if condition="$show['popups']">
<td class="vbmenu_control" id="imod" align="center" title="$vbphrase[moderation]"><script type="text/javascript"> vbmenu_register('imod'); </script></td>
<else />
<td class="thead" align="center">
<input type="checkbox" name="allbox" id="checkall_all" title="$vbphrase[check_uncheck_all]" onclick="inlineMod.check_all()" />
</td>
</if>
</if>
</tr>
</table>
<!-- / toolbar -->
<if condition="$show['inlinemod'] AND $show['popups']">
<div class="vbmenu_popup" id="imod_menu" style="display:none" align="$stylevar">
$threadadmin_imod_menu_post
</div>
</if>
<!-- end content table -->
$spacer_close
<!-- / end content table -->
<if condition="$show['threadedmode'] OR $show['hybridmode']">
<!-- thread posts list -->
$threadlist
<!-- /thread posts list -->
</if>
<if condition="$show['reputation']">
<script type="text/javascript" src="clientscript/vbulletin_ajax_reputation.js?v=$vboptions[simpleversion]"></script>
</if>
<div id="posts">$postbits<div id="lastpost"></div></div>
<!-- start content table -->
$spacer_open
<!-- / start content table -->
<!-- controls below postbits -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-top:$stylevar[margin_3px_fix]px">
<tr valign="top">
<if condition="$show['largereplybutton']">
<td class="smallfont"><a href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$LASTPOSTID" rel="nofollow"><if condition="$show['closethread']"><img src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]" border="0" /><else /><img src="$stylevar[imgdir_button]/threadclosed.gif" alt="$vbphrase[closed_thread]" border="0" /></if></a></td>





[LEFT]THANKS!!!
Jaxel
09-11-2009, 01:23 AM
You should use javascript for this... I hate it when people abuse CSS. Doing things in CSS when its SOOO much easier and more efficient to do it using other methods... Seriously, using CSS to display images? WTF is wrong with IMG tags?

var restoring = new Array();

function rollover(which, towhat){
restoring[which] = which.src;
which.src = towhat;
}

function rollout(which){
which.src = restoring[which];
}

<a onmouseover="rollover(imgName, 'newimage.png')" onmouseout="rollout(imgName)" href="link.php"><img src="oldimage.png" name="imgName"></a>
MaR?
09-11-2009, 01:39 AM
Jaxel are you sure that usign Java is better than css????

And... easy??

Tomorrow I´ll try and let you know if works... thanks!
pein87
09-12-2009, 04:44 AM
if your going to use css make the link like so. <a href="link/to/file" rel="no-follow" id="new reply">Text</a>

a#reply { display:block; height: 20px; width:120px; background: url(image url); }
a#reply :hover { display:block; height: 20px; width:120px; background: url(image url);background-position:-120; }

this makes it a roll over link and helps your SEO.
make it so your image has to shades on thats one on top of the other one for the hover one for the regular status. Switch size info with your own size info and img source as well. Should work if not PM me and I can do more if you had images.
MaR?
09-12-2009, 02:10 PM
PM Sent Pein, thanks
MaR?
09-14-2009, 12:00 AM
I just figured put how make this works... Just remaind one question:

https://vborg.vbsupport.ru/showthread.php?p=1884304#post1884304

thanks
pein87
09-14-2009, 03:25 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>

<style type="text/css">
a#testbtn {
background-repeat: no-repeat;
background-image: url('images/testbtn.jpg');
background-position:0px -20px;
width:120px;
height:20px;
display: block;
}
a:hover#testbtn {
background-repeat: no-repeat;
background-image: url('images/testbtn.jpg');
background-position:0px 0px;
width:120px;
height:20px;
display: block;

}
</style>

</head>

<body>
<a href="#" id="testbtn" rel="no-follow"></a>
</body>

</html>


this is the code I use on my test I'm adding the source files and the image. A note on this.

background-position:0px -20px;
the first one the 0px means that the image will be shown at the end of the x axis x axis is horizontal or left to right. the -20px is for the y axis or vertical or up and down. The lighting is at the top to to start the image we want to show the regular image so we set it to -20px. If you add 20px no image will be show. If you reversed so the regular image is at the top and the shine image is at the bottom then you could use -20px on the a:hover #yourIdName { background-position:0px -20px; } then it would work in a better order I only did it that way because I was in a rush.

Check the code of the demo files to see how I made the image.
ragtek
09-14-2009, 04:24 AM
You should use javascript for this... I hate it when people abuse CSS. Doing things in CSS when its SOOO much easier and more efficient to do it using other methods... Seriously, using CSS to display images? WTF is wrong with IMG tags?

var restoring = new Array();

function rollover(which, towhat){
restoring[which] = which.src;
which.src = towhat;
}

function rollout(which){
which.src = restoring[which];
}

<a onmouseover="rollover(imgName, 'newimage.png')" onmouseout="rollout(imgName)" href="link.php"><img src="oldimage.png" name="imgName"></a>

But not everybody have activated javascript, so for some cases (this example) it's better to use css.
MaR?
09-14-2009, 05:53 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>

<style type="text/css">
a#testbtn {
background-repeat: no-repeat;
background-image: url('images/testbtn.jpg');
background-position:0px -20px;
width:120px;
height:20px;
display: block;
}
a:hover#testbtn {
background-repeat: no-repeat;
background-image: url('images/testbtn.jpg');
background-position:0px 0px;
width:120px;
height:20px;
display: block;

}
</style>

</head>

<body>
<a href="#" id="testbtn" rel="no-follow"></a>
</body>

</html>


this is the code I use on my test I'm adding the source files and the image. A note on this.

background-position:0px -20px;
the first one the 0px means that the image will be shown at the end of the x axis x axis is horizontal or left to right. the -20px is for the y axis or vertical or up and down. The lighting is at the top to to start the image we want to show the regular image so we set it to -20px. If you add 20px no image will be show. If you reversed so the regular image is at the top and the shine image is at the bottom then you could use -20px on the a:hover #yourIdName { background-position:0px -20px; } then it would work in a better order I only did it that way because I was in a rush.

Check the code of the demo files to see how I made the image.

YOU ARE THE BEST...

THANK YOU SO SO MUCH
pein87
09-17-2009, 06:33 PM
Welcome did the one for press hover and normal state work for you, the one I sent you over a PM?