Can i make the image clickable on Featured Content Slider v2.5

[xsyam]

1) Script Title: Featured Content Slider v2.5

2) Script URL (on DD): www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem: I use this script and working well. thank you for it.

and i want the image from each slide clickable and linked, i tried add an a href but only text on caption linked not the image.



<a href="#" title=""> <-- the link
<div class="contentdiv" style="background-image:url(assets/images/home/1.jpg); background-repeat:no-repeat; "><!--slider 1 start-->
<div class="slider"><!--slider content text 1 open-->
<div class="slider_project_name"></div>
<div class="slider_content">Image Description</div>
<div class="slider_more"><a href="#">More link</a></div>
</div><!--slider content text 1 close -->
</div><!--end of slider 1 -->
</a>



but when i inspect element on ff show much a href links



<div class="contentdiv" style="background-image: url("assets/images/home/1.jpg"); background-repeat: no-repeat; display: block; z-index: 285; opacity: 1.1; visibility: visible;">
<a title="" href="#"> </a> <-- the tag closed here
<div class="slider">
<a title="" href="#"> <- link 2 appear
<div class="slider_project_name"></div>
<div class="slider_content">Image Description</div>
</a>
<div class="slider_more">
<a title="" href="#"></a> <-- link 3 appear
<a href="#">More link</a>
</div>
</div>
</div>



thanks in advance

[Beverleyh]

Well the content of each slide goes here (red);
<div class="contentdiv">
Content 1 Here.
</div>So try changing your markup to something like this;

<div class="contentdiv"><!--slider 1 start-->
<a href="#" title=""><div style="background-image:url(assets/images/home/1.jpg); background-repeat:no-repeat; ">
<div class="slider"><!--slider content text 1 open-->
<div class="slider_project_name"></div>
<div class="slider_content">Image Description</div>
<div class="slider_more"><a href="#">More link</a></div>
</div><!--slider content text 1 close -->
</div></a>
</div><!--end of slider 1 -->Basically, put your linked image into its own div within the <div class="contentdiv"> div.

If you need more help, please provide a link to your page.

[vwphillips]

A DIV is a 'block' element a link A is an 'inline' element.

A 'block' element can not be nested in an 'inline' element.

If you need to provide a link to the DIV element you can overlay a 'blank' image over the DIV content


<div class="contentdiv" style="background-image:url(assets/images/home/1.jpg); background-repeat:no-repeat; "><!--slider 1 start-->
<div class="slider"><!--slider content text 1 open-->
<div class="slider_project_name"></div>
<div class="slider_content">Image Description</div>
<div class="slider_more"><a href="#">More link</a></div>
</div><!--slider content text 1 close -->
<a href="#" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.jpg" style="position:absolute;z-Index:101;left:0ox;top:0px;width:100%;height:100%;border-Width:0px;"></a>
</div><!--end of slider 1 -->


or nest a linked image in the DIV element

[Beverleyh]

Good point Vic !

In HTML4 you shouldn't put the <a> tag outside of the <div>, but in HTML5 you can - you haven't said which one you're using so you'd need to use the approach which best suits your doctype.

Alternatively, I believe you could change the inner div to a span and set the style to display:inline-block;. I *think* that would validate (haven't tested though). You can validate your web page here though and that will alert you to any problems: http://validator.w3.org/

[molendijk]

Or you could do this:

<div class="contentdiv"><!--slider 1 start-->
<div onclick="location.href='#'" title=""><div style="background-image:url(assets/images/home/1.jpg); background-repeat:no-repeat; ">
<div class="slider"><!--slider content text 1 open-->
<div class="slider_project_name"></div>
<div class="slider_content">Image Description</div>
<div class="slider_more"><a href="#">More link</a></div>
</div><!--slider content text 1 close -->
</div></div>
</div><!--end of slider 1 -->

[jscheuer1]

If you do that, you would have to cancel the bubble/stop the propagation of the "More Link" a tag's click event which gets a bit complicated since jQuery is not used by the script. If jQuery is already on the page for something else or can be added:


<script type="text/javascript">
jQuery(function($){
$('.contentdiv a').click(function(e){e.stopPropagation();});
});
</script>

should take care of it.

I should also note that in these various scenarios, you cannot have an a tag inside another a tag. So Vic's idea of linking just the image seems best.


or nest a linked image in the DIV element