CODEWITHSUNDEEP
htmlcssimagehyperlink
Ege Aydın
Ege Aydın

Reputation: 1081

HTML link of image doesn' work

<div style="position:absolute; top:0; right:0">
    <a href="index.html">
        <img src="~/Content/Img/tr.png" alt="Türkçe" />
    </a>
    <a href="index_en.html">
        <img src="~/Content/Img/eng.png" alt="English" />
    </a>
</div>

I have this block of html in my home page. Images show but link does not work. In fact if I remove the style it starts to work. I am very confused.

Upvotes: 0

Views: 67

Answers (5)

jaunt
jaunt

Reputation: 5088

Okay so you can either set z-index:1 in the parent div or you can apply

position:absolute;
top:0;
right:0;

and 

position:absolute;
top:0;
right:40px;

to the img tags inside the a tags instead of the parent div. I'm sure there are other ways too, but these seems the easiest.

Upvotes: 0

5ervant - techintel.github.io
5ervant - techintel.github.io

Reputation: 4469

Some element was overlapping your links, just add z-index: 1; in your <div> style, jaunt got the answer!

<div style="z-index: 1; position:absolute; top:0; right:0">
    <a href="index.html">
        <img src="images/tr.png" alt="Türkçe">
    </a>
    <a href="index_en.html">
        <img src="images/eng.png" alt="English">
    </a>
</div>

Upvotes: 3

ja408
ja408

Reputation: 808

You need to add a z-index to the div that surrounds your links.

Right now <div class="fp-tableCell" style="height:776px;">is sitting on top of the div you're having issues with.

Add this to the div that you are having issues with:

<div style="position:absolute; top:0; right:0; z-index:999;">

Upvotes: 0

Newbie
Newbie

Reputation: 77

What is happening is that you have another DIV that happens to be overlapping this

I would change the first line to something like this and it should work

<div style="position:absolute; top:0; right:0; z-index=1000" >

Upvotes: 0

aleksandar
aleksandar

Reputation: 2399

Add the class on-top to the images and use the below CSS.

HTML:

<div style="position:absolute; top:0; right:0">
    <a href="index.html">
        <img class="on-top" src="~/Content/Img/tr.png" alt="Türkçe" />
    </a>
    <a href="index_en.html">
        <img class="on-top" src="~/Content/Img/eng.png" alt="English" />
    </a>
</div>

CSS:

.on-top {
    position: relative;
    z-index: 1;
}

Upvotes: 1

Related Questions