Solved

How do I dynamically inject HTML

Posted on 2010-09-09
13
276 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.

696 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