How do I dynamically inject HTML
I'm looking for suggestions or sample code on how to dynamically inject HTML into a page based on the user hovering or clicking on a link (the same action for either or both). I want to display an image in an area when the user hovers or clicks on a link. I'm open to better ways of doing this as well, this was my first thought of how i could achieve this. Thanks
If you want it simple, it is javascript. Put the image inside a div. Keep the style as hidden initially. Use the onmouseover event to change the style of the div to block.
You can also use Jquery to do the same in a more stylish way.
You can also use Jquery to do the same in a more stylish way.
ASKER
don't know if this changes the answers i've gotten so far but i also need the image to change depending on which link is clicked or hovered over. in other words link A will show image A, link B should show image B etc. does this change what i'm asking for?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You can have multiple div elements and different javascript can change their characteristics. Here is a simple example with one div, you can have multiple divs and multiple a href tags. The javascript is written inline here, you can call a function and write the same code in the function:
<h1>hi</h1>
<div id="div1" style="display: none">here is your image with the html img tag</div>
<h2>try this</h2>
<a href="#" onmouseover="document.getE
bring your mouse here
</a>
<h1>hi</h1>
<div id="div1" style="display: none">here is your image with the html img tag</div>
<h2>try this</h2>
<a href="#" onmouseover="document.getE
bring your mouse here
</a>
http://jquery.com/ has native support for this. It's a very useful javascript library
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
correction:
<style>
a img {
display:none;
}
a:hover img {
display:block;
}
</style>
<a href="#">some text <img src="image1.gif" /></a>
<style>
a img {
display:none;
}
a:hover img {
display:block;
}
</style>
<a href="#">some text <img src="image1.gif" /></a>
ASKER
@sybe: is this part:
<style>
a img {
display:none;
}
a:hover img {
display:block;
}
</style>
in the css file? if so, can i literally put "<style>" or "</style> in a css file? i didn't know i could do that if i can...or did you just place those there to indicate that you were in the css file. just curious i guess it can go in both the css and the aspx file...
<style>
a img {
display:none;
}
a:hover img {
display:block;
}
</style>
in the css file? if so, can i literally put "<style>" or "</style> in a css file? i didn't know i could do that if i can...or did you just place those there to indicate that you were in the css file. just curious i guess it can go in both the css and the aspx file...
It can be both in the css file and between <style> tags.
The same technique is used here ( http://psacake.com/web/jl.asp ) for pure-css tooltips. In stead of text, you can easily show/hide an image this way.
The same technique is used here ( http://psacake.com/web/jl.asp ) for pure-css tooltips. In stead of text, you can easily show/hide an image this way.
You would put the:
<style>
a img {
display:none;
}
a:hover img {
display:block;
}
</style>
inside the<head> tags of your aspx file, like the following:
Thanks
<style>
a img {
display:none;
}
a:hover img {
display:block;
}
</style>
inside the<head> tags of your aspx file, like the following:
Thanks
<html>
<head>
<title>My HTML File</title>
<style>
a img {
display:none;
}
a:hover img {
display:block;
}
</style>
</head>
</html>
If it would be only for that page yes. If it is used on more pages, I'd use an external css.
look for show div, hide div on google