使图像可点击而无需锚标记

Question

I have been trying to make a image in tag clickable without surrounding it with anchor tag.

Purpose is that I have used cfyon script from yahoo to make a scrolling marquee of images. The marquee is fine but the requirement includes making each picture of the marquee clickable. Onclick, a javascript function will be called. These images are fed to the script using the following code.

  <script type="text/javascript">
    Cufon.now();
    var marqueecontent = '<img src="marequee/DSC_11801.jpg" width="281" height="250" alt="Monique Relander"  class="highslide" onclick="return hs.expand(this)"/><img src="marequee/DSC_10541.jpg" width="274" height="250" alt="Monique Relander" /><img src="marequee/leather-chairs1.jpg" width="221" height="250" alt="Monique Relander" /><img src="marequee/tassel-lamp.jpg" width="194" height="250" alt="Monique Relander" /><img src="marequee/angellamp.jpg" width="162" height="250" alt="Monique Relander" /><img src="marequee/daybed.jpg" width="384" height="250" alt="Monique Relander" /><img src="marequee/birdcage.jpg" width="208" height="250" alt="Monique Relander" /><img src="marequee/oakchair.jpg" width="161" height="250" alt="Monique Relander" /><img src="marequee/candelabras.jpg" width="188" height="250" alt="Monique Relander" />';
  </script>

Surrounding individual tags with is not working.

The anchor tag look like

Please help!

Answer 1

Say you have an image like so

<img id="example" src="blah.jpg" />

You can make this clickable by styling it with css:

#example
  {
    cursor:pointer;
  }

and then using javascript + jquery library

$("#example").click(function() {
  window.location.href = 'http://www.google.co.uk'
});

EDIT: I put together a jsfiddle to show this in action : http://jsfiddle.net/sn6um/1/show/

Answer 2

您可以添加jquery库并执行类似的操作

$("img").click(function (){/*Here you put your action*/});

Answer 3

You have a couple options for solving this. First would be to build the images in JavaScript and add them tot he container. During this process you could attach the click handlers. Secondly you could add the handlers after you set the html content of the marquee. Let's look at both approaches:

Building Images With JavaScript

var myImage = new Image();
myImage.src = 'foo.png';
myImage.onclick = function(){
  alert( 'You clicked me' );
};
...
marqueeContainer.appendChild( myImage );

This would need to be done once for each image you have.

Set the HTML Content, then Add Event Handlers

var myHTML = '<img src="foo.png" />';
marqueeContainer.innerHTML = myHTML;
marqueeContainer.images[0].onclick = function(){
  alert( 'You clicked me' );
};

This method lets you use your current variable which contains all of your images and their attributes.

Answer 4

<input type="image" src="submit.gif" alt="Submit" width="48" height="48">

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_alt

Don't know when the options for "type=" for the input tag expanded but "image", "date", "number" are a wee revelation