Solved

How do I dynamically inject HTML

Posted on 2010-09-09
13
271 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
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 …
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

919 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