CODEWITHSUNDEEP
htmlcss
user2465543
user2465543

Reputation: 81

Link a img id="logo"

I have - img id="logo" SO I can have my logo on my website, the full code for it being:

<img id="logo" src="nsc/logo2.png" alt="logo" />

How can I link this logo image using <a href=""> ???

I've tried many different ways but they don't work :/

Upvotes: 4

Views: 90950

Answers (7)

Linh
Linh

Reputation: 60923

For people who want to receive click event on a tag instead of img tag

<a href="/chat" style="background: red; display: inline-block;">
  <img src="chat.svg" style="pointer-events: none; display: block;" width=40 height=40>
</a>

On a tag
  • display: inline-block in a: allows to set a width and height on a tag
On img tag
  • display: block: help remove extra space below the image
  • pointer-events: none: ignore click on img, click event will fired on a tag

Upvotes: 1

dhellryder
dhellryder

Reputation: 89

I add id in img tag like this:

  <img id={logo.id} src={logo.url} onError={this.handleImageError} />

Since I am working on React that's why I used JSX in the id and src attribute. onError attribute is used if the image is broken. It gives me an event, So this is how I access the id attribute:

handleImageError = (e) => { console.log(e.target.id) }

Upvotes: -1

brandito
brandito

Reputation: 708

If you can't wrap the image in a link, an image map should work just as well without requiring JavaScript & without needing to wrap the element.

Upvotes: 0

Ravi Gadag
Ravi Gadag

Reputation: 15861

It would be nice to embed in a link tag. :) 

<a href="your.html">
    <img id="logo" src="nsc/logo2.png" alt="BrandLog" />
</a>

it's clean and no need of javascript :)

Upvotes: 2

Kyle
Kyle

Reputation: 67194

It's super simple, just wrap the <img> tag with an anchor tag <a>: 

<a href="myUrl.html">
    <img id="logo" src="nsc/logo2.png" alt="logo" />
</a>

This will turn the entire image into a link for you :)

Upvotes: 1

SaurabhLP
SaurabhLP

Reputation: 3657

Here is the solution for you,

<img id="logo" src="nsc/logo2.png" alt="logo" onClick="window.open('http://yahoo.com');" />

Upvotes: -6

Antony
Antony

Reputation: 15106

<a href="www.example.com"><img id="logo" src="nsc/logo2.png" alt="logo" /></a>

Upvotes: 9

Related Questions