SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast codlib's Avatar
    Join Date
    Jan 2007
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a link around an image using DOM

    can anyone suggest a good method to create a link around an image using DOM.
    i have tried the following code. but it is not working.

    Code:
                   
    		var linkTag    =  document.createElement("a");
    			 linkTag.href    = hLink;
    			 linkTag.title    = title;
    			 linkTag.target = "_blank";
    			 itemDiv.id       = 'link-1';
    		itemDivRef.appendChild(linkTag);
    
    		// Image
    		var linkId =  'link-1';
    		var linkRef= $(linkId);
    		var imgTag    =  document.createElement("img");
    		imgTag.setAttribute('src','http://www.mysite.com/abc.jpg');
    		inkRef.appendChild(imgTag);
    while using this code, the image is not coming inside the anchor tag. it is displaying like below

    HTML Code:
    <a href="some link' /><img src="something"/>
    i want it like below.

    HTML Code:
    <a href="some link' ><img src="something"/> </a>
    thanks,
    codlib

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    For starters your last line has a spelling mistake (inkRef instead of linkRef). If you want to create a link around an image already in the DOM, I would do this:
    Code:
    var a = document.createElement('a');
        a.href = 'http://www.google.com';
        im.parentNode.insertBefore(a, im.nextSibling);
        a.appendChild(im);
    where "im" is a reference to the image in question (which is already in the DOM and which you have obtained a reference to using document.getElementsByTagName('img') or something like that).

    Otherwise if the image doesn't exist yet, it's even simpler.
    Code:
    var a = document.createElement('a');
        a.href = 'http://www.google.com';
        var i = a.appendChild(document.createElement('img'));
        i.src = 'image.gif';
        someElement.appendChild(a);
    where "someElement" is simply something you append the link containing the image to.

  3. #3
    Non-Member
    Join Date
    Aug 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for guiding

  4. #4
    SitePoint Enthusiast codlib's Avatar
    Join Date
    Jan 2007
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles.... Thank you for the wonderful explanation.

  5. #5
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    May I also convey my appreciation to The Gentleman Burglar
    Ian Anderson
    www.siteguru.co.uk

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I have thought burglary must be a rather exciting game.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •