jQuery mouseover effect help

Forum Moderators: open

Message Too Old, No Replies

jQuery mouseover effect help

hozyali

8:44 pm on Sep 21, 2010 (gmt 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

enigma1

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

Assuming your HTML code looks like
<div id="img_holder"><a href="#"> </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.

hozyali

7:33 am on Sep 25, 2010 (gmt 0)

thanks for your help, but it didn't work like you mentioned. please advise .

hozyali

7:33 am on Sep 25, 2010 (gmt 0)

sorry it got double posted.

enigma1

8:52 am on Sep 25, 2010 (gmt 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="#"> </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>

hozyali

9:05 am on Sep 25, 2010 (gmt 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

enigma1

10:49 am on Sep 25, 2010 (gmt 0)

sure you can do that but the post title talks about jQuery. What you posted is plain js.

hozyali

11:20 am on Sep 25, 2010 (gmt 0)

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

Thanks again for your help.