CODEWITHSUNDEEP
javascriptimagehyperlink
Kurniawan
Kurniawan

Reputation: 113

How to create link on image using Javascript

<div id="mydiv">
<img src="myimage.jpg" />
</div>
<script language="javascript">
var a=document.createElement('a');
a.href='http://mylink.com';
document.getElementById('mydiv').appendChild(a);
</script>

The script doesn't work to create link on image 

<div id="mydiv">
    <a href="http://mylink.com"><img src="myimage.jpg" /></a>
</div>

Upvotes: 5

Views: 27640

Answers (4)

Beejor
Beejor

Reputation: 9378

For single images

Where you can pass the image by element object, ID, or the first src substring match. Takes an optional target attribute, like "_blank". No jQuery required.

// By img element object
// (used by the functions below)
var addImageLink = function( elem, target ){
    if( !elem || !( 'tagName' in elem ) ){ return; }
    var image = elem;
    var parent = image.parentElement;
    var a = document.createElement( 'a' );
    a.href = image.getAttribute( 'src' );
    if( target ){ a.setAttribute( 'target', target ); }
    a.appendChild( image );
    parent.appendChild( a );
};

// By img element id
// <img src="images/gallery/1.jpg" id="image1" />
// <script> addImageLinkById( 'image1' ); </script>
var addImageLinkById = function( id, target ){
    addImageLink( document.getElementById( id ), target );
};

// By img element src (first match)
// <img src="images/gallery/1.jpg"/>
// <script> addImageLinkBySrc( '/1.jpg' ); </script>
var addImageLinkBySrc = function( src, target ){
    var image, images = document.getElementsByTagName( 'img' );
    if( typeof src == 'undefined' ){ src = ''; }
    for( var i = 0; i < images.length; i++ ){
        if( images[ i ].src.indexOf( src ) < 0 ){ continue; }
        addImageLink( images[ i ], target ); return;
    }
};

For looping through all images

This solution puts a link around every image. It's an expanded version of Falko's answer.

  • Doesn't use jQuery
  • Optionally whitelist images by href substring, like "images/gallery/"
  • Specify an optional target attribute, like "_blank"
  • Won't skip the second half of the images
    (I experienced this issue when trying his code, but it could be something I did wrong)
var addImageLinks = function( filter, target ){

    var parent, a, image;
    var images = document.getElementsByTagName( 'img' );
    var hasTarget = ( typeof target != 'undefined' );
    var hasFilter = ( typeof filter != 'undefined' );

    for( var i = 0; i < images.length; i++ ){

        image = images[ i ];
        if( hasFilter && ( image.src.indexOf( filter ) < 0 ) ){ continue; }

        // Skip over already-wrapped images, by adding an attribute
        if( image.getAttribute( 'data-wrapped-link' ) ){ continue; }
        image.setAttribute( 'data-wrapped-link', '1' );

        // Add the link
        parent = image.parentElement;
        a = document.createElement( 'a' );
        a.href = image.getAttribute( 'src' );
        if( hasTarget ){ a.setAttribute( 'target', target ); }
        a.appendChild( image );
        parent.appendChild( a );

        // We inserted a "new" image, so go back one step so we don't miss any
        // (due to being inside the "i < images.length" loop)
        i--;

    }

};

// Then:
// <img src="images/gallery/a.jpg"/>
// <img src="images/gallery/b.jpg"/>
// <img src="images/gallery/c.jpg"/>
// <img src="images/icons/a.gif"/> <- ignored

// Near bottom of the page (or in an onLoad handler, etc):
// </script> addImageLinks( 'images/gallery/', '_blank' ); </script>

Upvotes: 2

Falko Menge
Falko Menge

Reputation: 917

Here is a solution that doesn't need the additional div and puts a link around every image within the HTML page:

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<script type="text/javascript" charset="utf8">
  $(document).ready(function(){
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
      var image = images[i];
      var parentElement = image.parentElement;
      var a = document.createElement('a');
      a.href = image.getAttribute('src');
      a.appendChild(image);
      parentElement.appendChild(a);
    }
  });
</script>

Upvotes: 3

Kurniawan
Kurniawan

Reputation: 113

    <div id="mydiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/220px-Cat_November_2010-1a.jpg" />
</div>

<script language="javascript">
var a=document.createElement('a');
a.href='http://mylink.com';
var image = document.getElementById('mydiv').getElementsByTagName('img')[0];
b=a.appendChild(image);
document.getElementById('mydiv').appendChild(a);
</script>

Thank's for the idea. this work

Upvotes: 4

Quentin
Quentin

Reputation: 943207

You are putting the link after the image.

You need to move the image so it is inside the link.

var image = document.getElementById('mydiv').getElementsByTagName('img')[0];
a.appendChild(image);

Upvotes: 7

Related Questions