Hi James
Thanks so much for replying to my desperate request for help! LOL
Well somehow i managed to work....
This is what i've done.
jQuery(function($) {
function getLeaf(url) {
var splited=url.split('?');// remove all the parameter from url
url=splited[0];
return url.substring(url.lastIndexOf("/")+1);// return file name
without domain and path
}
jQuery.fn.extend({
enter: function() {//plugins creation
return this.each(function() {
var pth = $(this).find("img")[0];
//alert($(this).children().attr("href"));
if($(this).children().attr("href")==getLeaf
(document.location.href)){// check that the link url and document url
is same
$(pth).attr("src",pth.src.replace(/.gif/g, '_active.gif'));
} else{
$(this).hover(function(){
$(pth).attr("src",pth.src.replace(/.gif/g,
'_active.gif'));// mouse over Image
},function(){
$(pth).attr("src",pth.src.replace(/_active.gif/
g, '.gif'));// mouse out image
});
}
});
}
});
$(function(){ // Document is ready
$(".LPButton").enter();// call the 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')); }
);
});
My problemo now is that i would like to get rid of the src="full url
to the image" and just have src="folder/image/button/myimage" for the
input buttons
This is what i have now.
<input type="image" src="myfullurl/theme/newtheme/styleImages/buttons/
joinnow-off.gif" alt="Join Now" />
instead i'd like to have it like this...
<input type="image" src="theme/newtheme/styleImages/buttons/joinnow-
off.gif" alt="Join Now" />
Is that possible?
I'm going through some online video tutorials to get me started
also :)
J.
On Oct 1, 11:06 am, James <james.gp....@gmail.com> wrote:
> I'm still unsure what you want to achieve.
>
> To select the <a> tag, in place of:
> $('input[type="image"]')
>
> you can use:
> $(".LPButton")
>
> assuming that all relevant tags to want to work on will have the
> class="LPButton".
>
> That's as far as I know. I'm not clear on what you want to do with it.
> (There's no image src on a <a> tag, so it's not that..)
> Or is it that you want to roll over a text link and have another image
> do the hover effect?
>
> On Sep 30, 2:07 pm, jessie <mi...@optusnet.com.au> wrote:
>
> > 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
