Hi All
Please be gentle with me!
Ok, its been 5 days that i'm trying to understand jQuery. I cannot
get my head around it for the life of me! i'm no programmer and have
had no experience with JS. I've started developing websites only 1 yr
ago and i came across jQuery when i wanted to do an accordian menu and
some image replacements for my buttons.
But,,,,, aghhh let me tell you i'm absolutely going mad! i have
Dreamweaver CS3, i've downloaded the plugin for jsQuery and i still
don't get what i'm looking at. Had a look at a *beginners tutorial on
utube* and it looked fairly simple what he did and how he explained
it. Except.... where to from there! I'm running an ecommerce store
which is based on php and is using prototype library for one of the
lightboxes. So i've figured out that i need to do this for it to work
with both libraries.
<script type="text/javascript" src="skins/{VAL_SKIN}/jquery.js"></
script>
<script type="text/javascript" src="skins/{VAL_SKIN}/effects.js"></
script>
<script type="text/javascript" src="js/prototype.js"></script> <script
type="text/javascript" src="js/jslibrary.js"></script>
Where *effects* is the file i'm putting all my jquery stuff in.
In my effects.js file i have this so far.
jQuery(function($) {
$('input[type="image"]').hover(
function () { $(this).attr("src", $(this).attr("src").split('-
off').join('-on')); },
function () { $(this).attr("src", $(this).attr("src").split('-
on').join('-off')); }
);
});
It works a treat on my input button. [don't ask me how but it does! i
have 2 images that rollover nicely and can still keep the alt/title
tag in the background for users who wish to browse with images *off*]
My problem now is.. i'd like to add code that will allow me to do the
exact same thing on an a tag. Here is my code that i'd like to work
off.
<a href="index.php?act=viewProd&productId={VAL_PRODUCT_ID}"
class="LPButton" target="_self">More</a></div>
Here is my css
.LPContent a.LPButton:hover {
width:78px;
height:32px;
color:#808080;
background:url(../styleImages/buttons/LPmore-off.gif) no-repeat; }
.LPContent a.LPButton span {
color:#808080;
font-size:18px;
font-style:italic;
text-decoration:none;
visibility:hidden; }
.LPContent a.LPButton:hover span {
color:#818181;
text-decoration:none; }
God, if my css looks bad its because i've been at it for days and
changing constantly to see what works.
Please if anyone here can help me understand and/or show me where i'm
going wrong and what i should be doing i'd truly appreciate it.
Regards,
Jessie
