homepage Welcome to WebmasterWorld Guest from 54.197.110.151
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery mouseover effect help
hozyali

5+ Year Member



 
Msg#: 4204986 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4204986 posted 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

5+ Year Member



 
Msg#: 4204986 posted 7:33 am on Sep 25, 2010 (gmt 0)

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

hozyali

5+ Year Member



 
Msg#: 4204986 posted 7:33 am on Sep 25, 2010 (gmt 0)

sorry it got double posted.

enigma1

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4204986 posted 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

5+ Year Member



 
Msg#: 4204986 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4204986 posted 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

5+ Year Member



 
Msg#: 4204986 posted 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