vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)
-   -   CSS - Change image when mouse is over - GREAT! (https://vborg.vbsupport.ru/showthread.php?t=222838)

MaR? 09-10-2009 05:09 AM
CSS - Change image when mouse is over - GREAT!
 
1 Attachment(s)
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 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? 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/showthrea...04#post1884304

thanks

pein87 09-14-2009 03:25 AM
1 Attachment(s)
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 09-14-2009 04:24 AM
Quote:
Originally Posted by Jaxel (Post 1882916)
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? 09-14-2009 05:53 PM
Quote:
Originally Posted by pein87 (Post 1884379)
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 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?


All times are GMT. The time now is 01:26 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01134 seconds
  • Memory Usage 1,848KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (4)bbcode_code_printable
  • (4)bbcode_html_printable
  • (2)bbcode_php_printable
  • (2)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete