Solved

How do I dynamically inject HTML

Posted on 2010-09-09
13
270 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:mikesExpertExchange
  • 4
  • 2
  • 2
  • +4
13 Comments
 
LVL 4

Expert Comment

by:sdrouins
ID: 33638070
in javascript is the best way...

look for show div, hide div on google
0
 
LVL 1

Expert Comment

by:kaushikdeb
ID: 33638264
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.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 33638333
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?
0
 
LVL 18

Accepted Solution

by:
Anil Golamari earned 167 total points
ID: 33638450
0
 
LVL 9

Assisted Solution

by:richard_hughes
richard_hughes earned 167 total points
ID: 33638467
Hello mikesExpertExchange

I think this may answer your question:

http://api.jquery.com/hover/
http://docs.jquery.com/Main_Page

The above is a commonly used JavaScript library which will help you a lot.

Thank you very much,

Richard Hughes
0
 
LVL 1

Expert Comment

by:kaushikdeb
ID: 33638496
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.getElementById('div1').style.display='';">
bring your mouse here
</a>
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 14

Expert Comment

by:existenz2
ID: 33643922
http://jquery.com/ has native support for this. It's a very useful javascript library
0
 
LVL 28

Assisted Solution

by:sybe
sybe earned 166 total points
ID: 33644374
jquery is an absolute overkill for such a simple functionality. It is not exactly clear what you want but either you can use some simple javascript, but it is possible that there is a pure-css solution too. Something like:


<style>
a img {
    display:none;
}

a:hover {
    display:block;
}
</style>

<a href="#">some text <img src="image1.gif" /></a>

0
 
LVL 28

Expert Comment

by:sybe
ID: 33644375
correction:

<style>
a img {
    display:none;
}

a:hover img {
    display:block;
}
</style>

<a href="#">some text <img src="image1.gif" /></a>
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 33647010
@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...
0
 
LVL 28

Expert Comment

by:sybe
ID: 33647105
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.
0
 
LVL 9

Expert Comment

by:richard_hughes
ID: 33647275
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
<html>

    <head>

        <title>My HTML File</title>



        <style>

            a img {

                display:none;

            }



            a:hover img {

                display:block;

            }

    </style>



    </head>

</html>

Open in new window

0
 
LVL 28

Expert Comment

by:sybe
ID: 33650604
If it would be only for that page yes. If it is used on more pages, I'd use an external css.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
.net Multiple Row Form Fields Data Entry 4 18
Image(7) 1 36
Problem to page 4 23
Iterate a dictionnary to change values 4 28
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now