Welcome to WebmasterWorld Guest from 54.157.225.99

Forum Moderators: open

Message Too Old, No Replies

jQuery mouseover effect help

     
8:44 pm on Sep 21, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 7, 2008
posts: 93
votes: 0


Hi,

i have a simple image displayed and all I need is to change this image to show a div with some html inside, like form and field inside that div. means the div should be displayed in the same place of the image on which the mouse will hover.

Can someone please help?

Thanks
4:38 pm on Sept 24, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Apr 30, 2007
posts:1394
votes: 0


Assuming your HTML code looks like
<div id="img_holder"><a href="#">&nbsp;</a></div>

Using a background image:
<style>
#img_holder {
background: url(image.jpg) no-repeat;
width: 300px;
height: 300px;
}
</style>

Then the js code

<script language="javascript" type="text/javascript">
$('div#img_holder a').hover(
function () {
$(this).append($('<div>HTML Text/Fields etc here</div>'));
},
function () {
$(this).find('div:last').remove();
}
);
</script>

You can setup a class for the div set by js to format the inner content.
7:33 am on Sept 25, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 7, 2008
posts: 93
votes: 0


thanks for your help, but it didn't work like you mentioned. please advise .
7:33 am on Sept 25, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 7, 2008
posts: 93
votes: 0


sorry it got double posted.
8:52 am on Sept 25, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Apr 30, 2007
posts:1394
votes: 0


Here is a complete HTML page that does it change the image.jpg to the image filename you have and setup the background dimensions, setup the jquery.js to the filename you have and setup the inner html the way you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<style type="text/css">
body {font-family: Arial, sans-serif; font-size: 12px; color: #000; margin:0; padding:0; }
#img_holder {
background: url(image.jpg) no-repeat;
width: 400px;
height: 400px;
}
#img_holder a {
display: block;
width: 100%;
height: 100%;
}

#inner1 {
text-align: center;
padding-top: 100px;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="img_holder"><a href="#">&nbsp;</a></div>

<script language="javascript" type="text/javascript">
$('div#img_holder a').hover(
function () {
$(this).append($('<div id="inner1">HTML Text/Fields here</div>'));
},
function () {
$(this).find('div:last').remove();
}
);
</script>
</body>
</html>
9:05 am on Sept 25, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 7, 2008
posts: 93
votes: 0


Hi enigma1,

thanks a lot for your help. However I got it working with some other codes.

just if someone needs help, I did this
<div onmouseover="document.getElementById('hiddenDiv').style.display = 'block'" onmouseout="document.getElementById('hiddenDiv').style.display = 'none'" style="width:100px; height:100px;">
<div id="DefaultImg" style="display: block; width:100px; height:100px; position:relative;"><img src="1174997246_0108.jpg" style="width:100px; height:100px;" /></div>
<div id="hiddenDiv" style="display: none; background-color:#999; width:100px; height:100px; position:relative; top:-100px;">Div contents!</div>
</div>


there are 2 divs which get hide/show depending on the mouse action.

Thanks again
10:49 am on Sept 25, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Apr 30, 2007
posts:1394
votes: 0


sure you can do that but the post title talks about jQuery. What you posted is plain js.
11:20 am on Sept 25, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 7, 2008
posts: 93
votes: 0


yes I know. but since this plain jscript worked, it is ok for me.

Thanks again for your help.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members