The Arcive of Official vBulletin Modifications Site.

MaR? · #1 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:

PHP Code:


			
<ul id="nav"> 
 
[left] <li><a class="EXAMPLE" href="SOMEWHERE" title="ANYTHING">?????</a></li>
</ul>
[/left]

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

MY SHOWTHREAD

PHP Code:


			
<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[left]">
  $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]

[left]

THANKS!!!

Jaxel · #2 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?

Code:

var restoring = new Array();

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

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

Code:

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

MaR? · #3 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 · #4 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? · #5 09-12-2009, 02:10 PM

PM Sent Pein, thanks

MaR? · #6 09-14-2009, 12:00 AM

I just figured put how make this works... Just remaind one question:

https://vborg.vbsupport.ru/showthrea...04#post1884304

thanks

pein87 · #7 09-14-2009, 03:25 AM

HTML Code:

<!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.

HTML Code:

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 · #8 09-14-2009, 04:24 AM

Quote:

Originally Posted by Jaxel

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?

Code:

var restoring = new Array();

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

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

Code:

<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? · #9 09-14-2009, 05:53 PM

Quote:

Originally Posted by pein87

HTML Code:

<!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.

HTML Code:

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 · #10 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?

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06680 seconds Memory Usage 2,362KB Queries Executed 12 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (4)bbcode_code (4)bbcode_html (2)bbcode_php (2)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (10)postbit (2)postbit_attachment (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!