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:
-9999px;}
.show {LEFT:20px}
The html is:
<ul>
<li class="episode">
<img src="image1.jpg"/>
<div class="details">
Text to be shown on mouse over
</div>
</li>
<li class="episode">
<img src="image2.jpg"/>
<div class="details">
Text to be shown on mouse over
</div>
</li>
</ul>
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!!