CODEWITHSUNDEEP
javascript
winnie
winnie

Reputation: 41

How to make javascript created image a link

Hey there I am not very fluent with javascript and jquery. I want to replace a div with an image when clicked on one div and make that image clickable i.e. I want to add link to that image.

To get this I am using a javascript

function ReplaceContentInContainer(id,content) {      

        var container = document.getElementById(id);
        container.innerHTML = content;
}

I am calling this javascript from my index.ctp file as 

<div id="vedio-image">   
                    </div>

        <div class="title"> 
                                        <a href="javascript:ReplaceContentInContainer('vedio-image',
                                           '<img width=\'480px\' height=\'220px\' src=\'<?php echo $this->webroot.'img/'.$count['News']['videoImage']; ?> \'/ >')">
                                          <?php  echo $count['News']['title'];?>  
                                        </a>
                                    </div>

ReplaceContentInContainer is working perfectly but I am not able to make that image clickable. Please can anyone help.

Upvotes: 2

Views: 98

Answers (1)

Raptor
Raptor

Reputation: 54212

You didn't write onclick in <img> tag, or not surround your <img> tag with <a> tag

Change the HTML code to :

<div id="vedio-image"></div>
<div class="title"> 
  <a href="javascript:ReplaceContentInContainer('vedio-image',
                                           '<a href=\'http://example.com\'><img width=\'480px\' height=\'220px\' border=\'0\' src=\'<?php echo $this->webroot.'img/'.$count['News']['videoImage']; ?> \' /></a>')">
  <?php  echo $count['News']['title'];?></a>
</div>

sidenote: I added border="0" to avoid a blue border appearing in IE.

Upvotes: 1

Related Questions