I am experiencing difficulties when attempting to add hyperlinks to the images in my slider. I have come to understand that images cannot be clickable in jQuery sliders, so I have tried the following in the HTML:
<div class="wrapper">
<div class="slider">
<ul class="items">
<li>
<img src="img/img1.jpg" alt="" />
<div class="slider-banner">
<div class="imageLink" title="Click here to open Google website." onclick="window.open('http://www.google.com/'); return true;"></div>
<a href="http://www.google.com">
<span>Click here to open Google website.</span>
</a>
</div>
</li>
<li>
<img src="img/img2.jpg" alt="" />
<div class="slider-banner">
<div class="imageLink" title="Click here to open Yahoo website." onclick="window.open('http://www.yahoo.com'); return true;"></div>
<a href="http://www.yahoo.com">
<span>Click here to open Yahoo website.</span>
</a>
</div>
</li>
<li>
<img src="img/img3.jpg" alt="" />
<div class="slider-banner">
<div class="imageLink" title="Click here to open Gmail website" onclick="window.open('http://www.gmail.com/'); return true;"></div>
<a href="http://www.gmail.com/">
<span>Click here to open Gmail website.</span>
</a>
</div>
</li>
</ul>
</div>
For the CSS:
.imageLink {width: 950px;height: 400px;margin-top: -440px;cursor: pointer;}
Each time I save and preview, no text appears, and the images cannot be clicked inside the slider. It's as if the changes I made are invisible... I am confident it is a simple issue to resolve, but I cannot quite pinpoint what is missing in the code.
Here is the original website link I am editing:
Please assist me in resolving this matter.