Reputation: 225
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!
Upvotes: 6
Views: 12723
Reputation: 915
<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
Upvotes: 1
Reputation: 11431
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/
Upvotes: 8
Reputation: 268334
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:
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.
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.
Upvotes: 0
Reputation: 2654
You can add the jquery library and do something like that
$("img").click(function (){/*Here you put your action*/});
Upvotes: 0