[jQuery] image rollover

[jessie]

Hi

I have implemented this jQuery for image rollover on href

The only problem is, is there a way to call more than one class for
this particular function?
$(function(){  // Document is ready
 $("#nav td").enter();// call the function
});

So i have more than one class i'd like to this function but i have no
idea on how to add to it

here is the jQuery

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
 $("#nav td").enter();// call the function
});

Hope you can help.

Thanks
Jess

[jQuery] image rollover

[myjquery]

Hi all, im a newbie - infact just start learning jquery today!

I'm trying to work on an image mouseover function. When the user mouse-
over the image, the image will turn almost transparent and then some
text will appear on the top of the image. Something like this on this
site: 
http://www.bbc.co.uk/iplayer/episode/b00hc1jd/Hitsville_USA_50_Years_of_Heart_and_Soul_Whats_Still_Going_On_The_Legacy/

The concept is, to add CSS class "background" (which will add opacity)
to the img and then CSS class "show" to the text div, 'details', when
mouse-overed.

the CSS:
.background {filter:alpha(opacity=15);-moz-opacity:.15;opacity:.15}
.details {display:block;PADDING:2px;MARGIN-TOP:0px;WIDTH:
175px;CURSOR:pointer;POSITION:absolute;TOP:0px;HEIGHT:8.1em;LEFT:
-px;}
.show {LEFT:20px}

The html is:

 
  

 Text to be shown on mouse over
   
 

  

 Text to be shown on mouse over
   
 



I'm trying two approaches and nothing of them are working.

Approach one - which doesnt do anything at all:
$(document).ready(function()
{
  function c(d,e)
{
d=$(d);
e=(e&1?"add":"remove")+"Class";
d.get(".details").slice(0,1)[e]("show");
d.get("img").slice(0,1)[e]("background");
}

 var b={ mouseover:function(d) {c(this,1)}, mouseout:function(d) {c
(this)}}


 $("li.episode").each(function()
{
events.addListener(this,"mouseover",b.mouseover);
events.addListener(this,"mouseout",b.mouseout);
};
});


Approach two - when mouse-overed, the image start blinking constantly!
Apparently it has indefinte loop and I don't know how to fix it:

$(document).ready(function()
{
  $("img").mouseover(function ()
  {
$(this).addClass("background");
if($("div").hasClass("details"))
{
$('.details').addClass("show");
};

  });

  $("img").mouseout(function ()
  {
$(this).removeClass("background");
if($("div").hasClass("details"))
{
$('.details').removeClass("show");
};
  });
});

Any help would be really really appreciated!!

[jQuery] Image rollover effects in Superfish menu

[Simbarashe]

We have built our site using superfish to handle the main navigation
menu. The top level elements are images and for selecting the 'current
section" image, we use the codebehind to set the different image
states, and a rollover function in the client side to handle the image
rollovers. That gives us for example:

server-side:
home.png (standard menu image)
home-current.png (current section)

client-side:
home_o.png (over state)
home-current_o.png (current section / over state)

The only drawback I have right now is that the hover (over) states
show properly when you hover over the top-menu element itself. If you
hover in the sub-menu then the roll-over effect on the top-level menu
image disappears. Has anyone had any success in using rollover images
in a superfish menu, and how would I fix this?

[jQuery] Image rollover using jQuery

[Ray M]

Hello,

Are there any existing jQuery plugin which can provide similar image
rollover functions such as the one provided by Dreamweaver?


Thanks.

Ray

[jQuery] Image rollover plugin?

[howa]

Something like what dreamweaver provide, are there such as plugin in
jQuery?

Thanks.

[jQuery] Image Rollover

[Frank]

Hi fellow members,

I have to accomplish the following for same page side navigation:

pseudo code:

nav 1 - mouseout image1, mouseover image2
click image, fn(view div) css display:block  shows text on same page
if "click" show image 2 - if !click show image1

nav(n) the same as above
If click nav2 - nav(n) revert back to image1

I am not sure how to accomplish this.  here is my code.

$(function() {

$("#fast").click(function(){view('hid1')}).mouseover(function()
{linkOver('fast')})
.mouseout(function(){ linkOut('fast')
});

});
linkOut(), linkOver() javascript to control the images

that is it, hope you can help,

Frank