Solved

How to append image to the link by javascript

Posted on 2009-07-05
6
1,024 Views
Last Modified: 2012-05-07
Hi I've got to add picture to the side of a link.

My question is how do I append image tag to the link via javascript?

the link looks like this:
 <li id="35">
<a href="?address=1"> link </a>
</li>
how do i append: <img src="..." /> just after <li>
(I want it to be appended straight after document is ready for display)
??
0
Comment
Question by:vidda22
6 Comments
 
LVL 4

Accepted Solution

by:
stevepicks earned 200 total points
ID: 24779912
 this script is the closest i could think:
1) edit : images[1].src = "images/image1.gif";  to point to a real image
2) get a clear.gif image that is transparent
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
 
images = new Array;
images[1] = new Image();
images[1].src = "images/image1.gif";
images[2] = new Image();
images[2].src = "images/image2.gif";
images[3] = new Image();
images[3].src = "images/image3.gif";
images[4] = new Image();
images[4].src = "images/image4.gif";
images[5] = new Image();
images[5].src = "images/image5.gif";
images[6] = new Image();
images[6].src = "images/image6.gif";
function GetPic(num) { 
document.ImageHolder.src = images[num].src;
document.ImageHolder.width = images[num].width;
document.ImageHolder.height = images[num].height;
}
// End -->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body onLoad="GetPic(1);">
<li id="35">
<img name="ImageHolder" src="images/clear.gif" width="1" height="1" border="0" alt="some text">
<a href="?address=1"> link </a>
</li>
</body>
</html>

Open in new window

0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 24780208
this?
<a href="#" onclick=document.img1.src="http://images.google.ca/intl/en_ALL/images/logos/images_logo_lg.gif;">Link</a>
<p>
<img src ="http://a.gif" name="img1"><p>

Open in new window

0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 24780216
sorry there's a typo above (although strangly it works?). It should be

<a href="#" onclick='document.img1.src="http://images.google.ca/intl/en_ALL/images/logos/images_logo_lg.gif;"'>Link</a>
<p>
<img src ="http://a.gif" name="img1">
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 10

Assisted Solution

by:Bane83
Bane83 earned 100 total points
ID: 24780555
Use jquery for this. (http://jquery.com/)
$(document).ready(function () {
    $("li > a").prepend("<img src="..." />");
});

Open in new window

0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 200 total points
ID: 24780717
or without jQuery

<script>
window.onload=function() {
  var html =document.getElementById('35').innerHTML;
  if (html.toLowerCase().indexOf('img')==-1)
    document.getElementById('35').innerHTML = '<img src="..." />'+html;
}
</script>
0
 
LVL 10

Expert Comment

by:Bane83
ID: 24780948
That assumes a single li of id='35'.

Alternatively:

items = document.getElementsByTagName('li') OR containingListElement.getElementsByTagName('li');
for(i = 0; i < items.length; i++)
{
     item.innerHTML = '<img src="..." />' + item.innerHTML;
}

I just prefer using jquery since it generally works in any browser you throw at it.
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 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