Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How do I dynamically inject HTML

Posted on 2010-09-09
13
Medium Priority
?
280 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:Michael Sterling
[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:Michael Sterling
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
Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

 
LVL 18

Accepted Solution

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

Assisted Solution

by:richard_hughes
richard_hughes earned 668 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 664 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:Michael Sterling
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

Veeam Task Manager for Hyper-V

Task Manager for Hyper-V provides critical information that allows you to monitor Hyper-V performance by displaying real-time views of CPU and memory at the individual VM-level, so you can quickly identify which VMs are using host resources.

Question has a verified solution.

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

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…
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
Despite its rising prevalence in the business world, "the cloud" is still misunderstood. Some companies still believe common misconceptions about lack of security in cloud solutions and many misuses of cloud storage options still occur every day. …
Screencast - Getting to Know the Pipeline

610 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