Ok so this is what i want to do and can't achieve.
I have images that i'd like to rollover here is the markup for both
of those instances, 1 is a button and the other is just a hyperlink
<div class="LPButton"><a href="index.php?act=viewProd&productId=
{VAL_PRODUCT_ID}" target="_self"><img src="skins/{VAL_SKIN}/
styleImages/buttons/LPmore.png" alt="More" border="0" /></a></div>
<form action="{FORM_METHOD}" method="post" >
<input name="email" type="text" size="14" maxlength="255"
class="textboxMail" value="{LANG_EMAIL_ADDRESS}"
onclick="this.value='';" />
<input type="hidden" name="act" value="mailList" />
<br />
<input type="image" src="skins/{VAL_SKIN}/styleImages/buttons/joinnow-
off.gif" alt="Join Now" />
</form>
it was all working fine until i applied the png fix. which is
jquery.pngFix which i downloaded from here
http://jquery.andreaseberhard.de/pngFix/
Now i don't know how to fix this i have tried and tried and can't
understand what i would need to do to make this all work.
I need to use jquery because i want to keep my alt and title tags
behind my images.
Here is the code i have. which is not working in IE
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
}
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
$(pth).attr("src",pth.src.replace(/.png/g, '_active.png'));
} else{
$(this).hover(function(){
$(pth).attr("src",pth.src.replace(/.png/
g,'_active.png'));// mouse over Image
},function(){
$(pth).attr("src",pth.src.replace(/_active.png/
g,'.png'));
});
}
});
}
});
$(function(){ // Document is ready
$(".LPButton,.CatMoreBtn").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')); }
);
});
jQuery(document).ready(function($){
$('div.LPButton, div.CatMoreBtn, div.CatBuyBtn').pngFix( );
});
Jess
On Oct 11, 2:18 pm, jessie <mi...@optusnet.com.au> wrote:
> Hi Rick
>
> Thank-you very much yes it did get rid of the error. I'm also
> checking it in firebug and i can't see the other error your getting
> ie.
> $("div.LPButton, div.CatMoreBtn, div.CatBuyBtn").pngFix() is not a
> function
>
> Nevertheless the error is gone but now my hovering images don't work!
>
> Any reason why this is happening?
>
> Thank-you!
>
> Jess
>
> On Oct 11, 1:15 pm, "Rick Faircloth" <r...@whitestonemedia.com> wrote:
>
> > Well, let's check the bracketing... (I need to format this
> > so I can read it more easily...)
>
> > jQuery(function($) {
>
> > function getLeaf(url) {
>
> > var splited=url.split('?');
> > url=splited[0]; return url.substring(url.lastIndexOf("/")+1);
>
> > } jQuery.fn.extend({
>
> > enter: function() {
>
> > return this.each(function() {
>
> > var pth = $(this).find("img")[0];
>
> > if ( $(this).children().attr("href") ==
> > getLeaf(document.location.href) )
> > { $(pth).attr("src",pth.src.replace(/.png/g,
> > '_active.png')); }
>
> > else { $(this).hover(function() {
>
> > $(pth).attr("src",pth.src.replace(/.png/g,'_active.png'));
>
> > },function() {
>
> > $(pth).attr("src",pth.src.replace(/_active.png/g,'.png'));
>
> > });
> > }
> > });
> > }
> > });
>
> > });
>
> > jQuery(document).ready(function($){
>
> > $('div.LPButton, div.CatMoreBtn, div.CatBuyBtn').pngFix();
>
> > });
>
> > jQuery(document).ready(function($) {
>
> > $(".button").hover(function() {
>
> > $(".button").addClass("imgbuttonhover");
> > $(".button").removeClass("imgbutton");
>
> > }, function() {
>
> > $(".button").addClass("imgbutton");
> > $(".button").removeClass("imgbuttonhover");
>
> > }
> > )
>
> > });
>
> > After working with this in my editor, this is the bracketing that I used
> > to eliminate the error you were getting.
>
> > Now, however, I get this error in Firebug:
>
> > $("div.LPButton, div.CatMoreBtn, div.CatBuyBtn").pngFix() is not a function
>
> > If you copy the code above and put it in your editor, does the bracketing
> > error go away?
>
> > Rick
>
> > -----Original Message-----
> > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> > Behalf Of jessie
> > Sent: Saturday, October 10, 2009 10:12 PM
> > To: jQuery (English)
> > Subject: [jQuery] Re: My code is not working getting an error missing )
>
> > yes the only error now i'm getting is
>
> > missing } after function body
> > [Break on this error] )
>
> > Jess
>
> > On Oct 11, 12:08 pm, "Rick Faircloth" <r...@whitestonemedia.com>
> > wrote:
> > > and the only error you're getting is that a ")" is missing?
>
> > > -----Original Message-----
> > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> > > Behalf Of jessie
> > > Sent: Saturday, October 10, 2009 9:57 PM
> > > To: jQuery (English)
> > > Subject: [jQuery] Re: My code is not working getting an error missing )
>
> > > ok thanx guys, except that didn't resolve the problem.
>
> > > I've posted about this before, and still can't get a way around it
> > > all.
>
> > > For starters this is what i currently have.
> > > 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
> > > }
> > > 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
>
> > > $(pth).attr("src",pth.src.replace(/.png/g, '_active.png'));
> > > } else{
> > > $(this).hover(function(){
> > > $(pth).attr("src",pth.src.replace(/.png/
> > > g,'_active.png'));// mouse over Image
> > > },function(){
> > > $(pth).attr("src",pth.src.replace(/_active.png/
> > > g,'.png'));
> > > });
> > > }
> > > });
> > > }
> > > });
> > > jQuery(document).ready(function($){
> > > $('div.LPButton, div.CatMoreBtn, div.CatBuyBtn').pngFix(
> > );
> > > });
> > > jQuery(document).ready(function($) {
> > > $(".button").hover(function() {
> > > $(".button").addClass("imgbuttonhover");
> > > $(".button").removeClass("imgbutton");
> > > }, function() {
> > > $(".button").addClass("imgbutton");
> > > $(".button").removeClass("imgbuttonhover");
> > > }
> > > )
>
> > > and its still spitting out an error.
>
> > > Second of all this is what i want to do.
>
> > > I want any image that is not associated with a form and is only a
> > > hyperlink to rollover using a png fix for ie6.
>
> > > I also have forms on my ecommerce site and i need to style these the
> > > same way. So my *buttons within a form* need to also rollover using a
> > > png fix.
>
> > > I have been at this for the past week and a half and still can't get
> > > it to work for all.
>
> > > The code i have above i've put together from other ppl who have helped
> > > me with my problem of rolling images and buttons.
>
> > > Hope someone can help me figure this one out once and for all.
>
> > > I'm very very new to jquery and the reason i'd like to use it is
> > > because i want to keep my alt and title text behind my image rollovers
> > > such as buttons ;-)
>
> > > Jess :)
>
> > > On Oct 11, 11:45 am, "Rick Faircloth" <r...@whitestonemedia.com>
> > > wrote:
> > > > Now, Matt! I just knew by the time I typed up a long-winded reply,
>
> > > > someone would come along and give the short, to-the-point, answer. :op
>
> > > > :o)
>
> > > > Rick
>
> > > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> > > > Behalf Of Matt Quackenbush
> > > > Sent: Saturday, October 10, 2009 9:32 PM
> > > > To: jquery-en@googlegroups.com
> > > > Subject: [jQuery] Re: My code is not working getting an error missing )
>
> > > > Add a ) to the end. You have to close the opening hover() function
> > call.
