Welcome to WebmasterWorld Guest from 107.20.59.213

Forum Moderators: open

Message Too Old, No Replies

jQuery mouseover effect help

     

hozyali

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

5+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



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.

hozyali

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

5+ Year Member



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

hozyali

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

5+ Year Member



sorry it got double posted.

enigma1

8:52 am on Sep 25, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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>

hozyali

9:05 am on Sep 25, 2010 (gmt 0)

5+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



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)

5+ Year Member



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

Thanks again for your help.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month