a href link on img is not working

Question

Hi I have the following code that have few links to images,but its not showing the link also it not redirecting to the page.yes i put about us in correct directory like as my menu

my menu

<li><a href="about_us.html">About Us</a>
                                    <ul>
                                        <li><a href="team.html">Team</a></li>
                                                <li><a href="location.html">Location</a></li>
                                                <li><a href="careers.html">Careers</a></li>
                                    </ul>
                                </li>

HTML:

<a href="about_us.html"><img class="ls-s2"  src="images/slides/xichlofrontvideo.png" alt="" style="position: absolute; top: 100px; left: 60px; slidedirection : bottom; slideoutdirection : bottom;  durationin : 1000; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 500; delayout : 0; showuntil : 0; "></a>
<a href="about_us.html"><img class="ls-s2"  src="images/slides/cap_a1.png" alt="" style="position: absolute; top: 160px; left: 600px; slidedirection : top; slideoutdirection : top;  durationin : 2000; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 500; delayout : 0; showuntil : 0; "></a>
<a href="about_us.html"><img class="ls-s2"  src="images/slides/cap_a2.png" alt="" style="position: absolute; top: 290px; left: 600px; slidedirection : right; slideoutdirection : right;  durationin : 2500; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 500; delayout : 0; showuntil : 0; "></a>
<a href="about_us.html"><img class="ls-s2"  src="images/slides/cap_a3.png" alt="" style="position: absolute; top: 410px; left: 600px; slidedirection : bottom; slideoutdirection : bottom;  durationin : 3000; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 500; delayout : 0; showuntil : 0; "></a>
<a href="about_us.html"><img class="ls-s2"  src="images/slides/cap_a3.png" alt="" style="position: absolute; top: 410px; left: 750px; slidedirection : bottom; slideoutdirection : bottom;  durationin : 3500; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 500; delayout : 0; showuntil : 0; "></a>

`"but its not working"` is not an accurate enough description. Please elaborate more. — Darren, Jul 23 '14 at 06:56

score 4 · Answer 1 · edited May 23 '17 at 12:14

Check if your "about_us.html" file is in the right directory. If it's not redirecting it is probably not in the right directory.

You are using href="about_us.html" which means that the "about_us.html" file has to be in the same directory like the file in which you have the a tag placed.

You maybe should have a look at relative and absolute URLs. This may help you:

score 3 · Answer 2 · answered Jun 16 '17 at 16:06

3

It is also possible that your image is behind the bar. For that you can use the z-index property. Use this:

a {
   position: absolute;
   z-index: 9999;
}

answered Jun 16 '17 at 16:06

Dev Rathi

703
6
8

score 1 · Answer 3 · answered Jul 23 '14 at 07:03

1

Does your code file in the same directory with the about_us.html? If not, modify it.

So does the images/ directory.

answered Jul 23 '14 at 07:03

CPT

250
1
12

score 0 · Answer 4 · answered Jul 23 '14 at 06:59

http://jsfiddle.net/ej4ac/

What is not working ?

Cant be redirect ?

<a href="about_us.html"><img class="ls-s2"  src="images/slides/xichlofrontvideo.png" alt="" style="position: absolute; top: 100px; left: 60px; slidedirection : bottom; slideoutdirection : bottom;  durationin : 1000; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 500; delayout : 0; showuntil : 0; "></a>
            <a href="about_us.html"><img class="ls-s2"  src="images/slides/cap_a1.png" alt="" style="position: absolute; top: 160px; left: 600px; slidedirection : top; slideoutdirection : top;  durationin : 2000; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 500; delayout : 0; showuntil : 0; "></a>
            <a href="about_us.html"><img class="ls-s2"  src="images/slides/cap_a2.png" alt="" style="position: absolute; top: 290px; left: 600px; slidedirection : right; slideoutdirection : right;  durationin : 2500; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 500; delayout : 0; showuntil : 0; "></a>
            <a href="about_us.html"><img class="ls-s2"  src="images/slides/cap_a3.png" alt="" style="position: absolute; top: 410px; left: 600px; slidedirection : bottom; slideoutdirection : bottom;  durationin : 3000; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 500; delayout : 0; showuntil : 0; "></a>
            <a href="about_us.html"><img class="ls-s2"  src="images/slides/cap_a3.png" alt="" style="position: absolute; top: 410px; left: 750px; slidedirection : bottom; slideoutdirection : bottom;  durationin : 3500; durationout : 750; easingin : easeInOutQuint; easingout : easeInBack; delayin : 500; delayout : 0; showuntil : 0; "></a>

I guess your about_us.html is not in the correct directory path because according to the above jsfiddle, ur codes works well and a href is working.

@Xavi did you put your about_us.html in the correct directory path ? — TooJuniorToCode, Jul 23 '14 at 07:04
@Xavi not sure what's the problem ur facing, you can still find the solution at http://jsfiddle.net/ej4ac/4/ I think you should try target="_blank". — TooJuniorToCode, Jul 23 '14 at 07:10

score 0 · Answer 5 · answered Jul 23 '14 at 07:00

0

try to insert / in the href tag before the URL like this : <a href="/about_us.html"></a>

answered Jul 23 '14 at 07:00

mkazma

572
3
11
29

a href link on img is not working

5 Answers5