PDA

View Full Version : Codaslider Hyperlink



kikilech
Sep 22nd, 2010, 10:42 AM
I'm quite new at CSS and HTML and I am using the Codaslider ( http://www.ndoherty.biz/2009/10/coda-slider-2/ ) and I would like to add a Hyperlink to a part of an image (or the whole image) in the slider. I know I can't do this in the CSS but I don't know where to look at and how to tag the URL so the image is Hyperlinked. The implementation can be found here: http://demo.mattiaviviani.com/html_templates/synthetik/ I would like to make the Photo phrame hyperlinked so that a user can click on the frame or a part of the frame.

CarlLawl
Sep 22nd, 2010, 11:02 AM
for each image you have this



<div class="panel">
<div class="panel-wrapper">
<h2 class="title">3</h2>
<img src="images/slider/slide_img3.jpg" alt="" />
</div>
</div>

you want to change


<img src="images/slider/slide_img3.jpg" alt="" />

to


<a href="URLHERE"><img src="images/slider/slide_img3.jpg" alt="" /></a>

i assume this is what youre after?

i hope this helps

SB65
Sep 22nd, 2010, 11:08 AM
Simply wrapping an anchor <a> tag around the image should be enough. Something like:


<div class="panel">
<div class="panel-wrapper">
<h2 class="title">4</h2>
<a href="http://whatever.com">
<img src="images/slider/slide_img4.jpg" alt="" />
</a>
</div>
</div>


EDIT: I see I've been beaten to it...:)

kikilech
Sep 22nd, 2010, 11:09 AM
Thank you very much Carl for your quick reply. However, what I do want is not the interior image to be linked, but the outside frame which you can find here:

I have altered this image and would like it to be linkable (ideally part of this image only)

kikilech
Sep 22nd, 2010, 11:33 AM
Apparently this image I can only find it in the CSS part (screen.css) which says:

#featured-wrap {
height:450px;
background:transparent url(../images/sliderBG.png) center -10px no-repeat;
}

I know you can't add hyperlinks in CSS as far as I know, but correct me if I'm wrong. Is there a trick to do this in another way?

SB65
Sep 22nd, 2010, 11:48 AM
The #featured-wrap div is just the frame across which each of the images slide - so adding a link to that isn't going to do what I think you want - which is to be able to click on any one of the images as it slides. Adding the link to the image means the whole content of the frame will be clickable, but not the frame itself.

kikilech
Sep 22nd, 2010, 11:55 AM
Exactly! Thanks for your reply.

So I guess there is no trick to make the frame clickable then?

SB65
Sep 22nd, 2010, 12:34 PM
Maybe I'm missing something. Why would you want the frame (specifically) to be clickable? Surely users will expect to click on the image, not the frame?

kikilech
Sep 22nd, 2010, 12:43 PM
Very valid question. Maybe it's my unexperience to add and change CSS or HTML.

There is a text and a button I would like to make hyperlinkable. I don't know how to do this in HTML. If I add an extra image to the page, because of the CSS parts it will not 'overlay' on the 2 areas. The slider is in one part and I would like the image to overlay both the slider and if possible the part below it.

The area where the slider is starts with this in HTML:

<!-- BEGIN FEATURED CONTENT -->
<div id="featured-wrap" class="clearfix">
<div id="featured" class="container_16 clearfix">
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">album</h2>
<a class="linkButton" href="voorbeelden.html">Meer zien?</a>
<img src="images/slider/album.jpg" alt="" />

-----

The part below it starts with this code:


</div>
</div> <!-- .coda-slider -->
</div> <!-- .coda-slider-wrapper -->

</div> <!-- end #featured -->
</div> <!-- end featured-wrap -->
<!-- END FEATURED CONTENT -->

<!-- BEGIN SERVICES CONTENT -->
<div id="servicesTop"></div>
<div id="services-wrap">
<div id="services" class="container_16 clearfix">

<div id="box1" class="grid_5">


----

Hope this all makes sense and you have a solution.

Thanks

SB65
Sep 22nd, 2010, 01:00 PM
Ahhhhh, right. You're not trying to link the images in the slider at all? Or if you are, this is a separate question? That makes more sense.

You're trying to make the text and tag at the bottom linkable, is that right.

Hmm, a few ways you could do this. Here, I think I would take the text off the image, add it to the page instead and then position it absolutely within #featured-wrap so it's on top of the background image, if that's needed - or otherwise just position it under the slider. That's the neatest solution I think. So, assuming you go down the absolute positioning route, you want something like:


<div id="featured-wrap" class="clearfix">
<a id="framelink" href="http://whatever.com">Your text link here</a>
<div id="featured" class="container_16 clearfix">
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id=....etc etc

for your html, and


#featured-wrap{position:relative}

#framelink{position:absolute;top:300px;left:20px;display:block;height:100px;width:400px}

With the top/left/height/width amended as required.

kikilech
Sep 22nd, 2010, 01:26 PM
Thank you so much as this is indeed what I'm looking for.

Two beginner questions:

1) How do I style the text so that it looks not as a link and is a different font

I'm talking about the text 'your text link here' in your sample

<a id="framelink" href="http://whatever.com">Your text link here</a>

2) If I would like to add the red image would it be something like this?

<a id="frameimage" href="http://whatever.com"><img src="images/button.png" alt="" /></a>

And in the CSS I do something similar as you mentioned in the previous answer?

Thanks again for your help

SB65
Sep 22nd, 2010, 01:54 PM
Assuming that the font you're using is relatively "normal" then you can style the font and remove the underline with css:


#framelink{position:absolute;top:300px;left:20px;display:block;height:100px;width:400px;font-family:"Times new Roman",Garamond,serif;text-decoration:none}

If it's an odd font, then use an image instead of the text, and wrap the anchor tags around it as in your question 2.

To add the image, yes, as your post. At the risk of saying something very very obvious, you'd need to apply different ids to the text and to the image, so you can apply different positioning to each of them via css.

Having the text/image actually on the page here is probably better for SEO if that's a consideration, and certainly better for screenreaders.