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!
Complete HTML/CSS Course 2022 To use image as a link in HTML, use the <img> tag as well as the <a> tag with the href attribute. The <img> tag is for using an image in a web page and the <a> tag is for adding a link. Under the image tag src attribute, add the URL of the image. With that, also add the height and width.
To create a clickable image online, all you need is a JPG file and a website address (the URL). Just as you can add a link to any text on a web page or Word document, you can add a link to any image file, including JPGs, PNGs and GIFs.
An <a> element without an [href] attribute is still valid. As far as semantics and styling is concerned, the <a> element isn't a link ( :link ) unless it has an [href] attribute. A side-effect of this is that an <a> element without [href] won't be in the tabbing order by default.
How do I make an anchor tag non clickable? In order to disable a HTML Anchor Link (HyperLink), the value of its HREF attribute is copied to the REL attribute and the value of HREF attribute is set to an empty JavaScript function. This makes the HTML Anchor Link (HyperLink) disabled i.e. non-clickable.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With