Solved

How do I dynamically inject HTML

Posted on 2010-09-09
13
272 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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
 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
This is used to tweak the memory usage for your computer, it is used for servers more so than workstations but just be careful editing registry settings as it may cause irreversible results. I hold no responsibility for anything you do to the regist…

816 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

8 Experts available now in Live!

Get 1:1 Help Now