如何使javascript创建的图像链接

Question

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 ie 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.

Answer 1

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.