homepage Welcome to WebmasterWorld Guest from 174.129.130.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery mouseover effect help
hozyali




msg:4204988
 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




msg:4206450
 4:38 pm on Sep 24, 2010 (gmt 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.

hozyali




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

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

hozyali




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

sorry it got double posted.

enigma1




msg:4206747
 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="#">&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




msg:4206754
 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




msg:4206777
 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




msg:4206780
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved