Linking Accordion Images to sites

Is there a way to add links in the CSS stylesheet where the images of the Accordion are? I want to link some of the pictures it displays so when someone clicks a pic in the accordion it takes them to another site.

I tried moving the pictures to homepage message and it did indeed work, but the accordion did not hold its width value I have set in javascript management so I had to put them back in the css stylesheet.

So is there a way to add links to websites in the CSS stylesheet so when someone clicks a picture in the accordion it takes them to another site?

thanks.

I use phpbb3.

My forum url: http://avrillavignetalkshow.forumotion.com/

I don't know what you mean? Accordion?

Ahkrir wrote:I don't know what you mean? Accordion?

Look at the tutorial here:

https://help.forumotion.com/t105962-index-in-accordion

Hi,

You want to make the images that open with the press on the example: "Slide one" clickable?

If so, all you need to do is delete the CSS part with the images:

Code:

#s1 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s2 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s3 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s4 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s5 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}

And add the images beetween the div's as a clickable image, like this:

<div id="s1"><a href="https://help.forumotion.com/t105972-how-to-make-accordion-slides-clickable"><img src="http://nicolahibbert.com/demo/liteAccordion/img-demo/1.jpg" /> </a></div>

If that was not on your mind please explain a bit better.

Regards.

I have tried that I seen this post before when I did a search of this question. When I used that method it did not hold the width of the accordion properly that I have it set for in javascript management. I have extra code added to the javascript that uses percentages % for the width of the accordion instead of a fixed width.

So let me ask this another way, is there a way I can link them in the css stylesheet?

Why did you set it in JS? Width could be altered afterwords. Do the procedure and add the link to your forum here so we can see it.

I set it in the javascript because that is where you are suppose to set it. Look at the tut that is the only place that has a width value for the accordion.

I'm not adding that code back again. Let me explain what it did. My pics are 715 wide and my accordion is set at 77% width and the accordions width went down considerably with that code. It did not respect the coding that hold the width which is in (percentages not the default fixed px).

http://avrillavignetalkshow.forumotion.com/

I use to have this problem.

MrMax wrote:I use to have this problem.

That's very helpful thank you so much.

I have this solved. I decide to use a fixed width for this accordion so I am able to add the links to the images like I wanted. The problem was when you use a liquid width (percentages 70%) for the accordion's width and use div id tags in an html document to link the pics, it will no longer recognize the percentage width you have set for the accordion. I'm sure there is a way around that but it was easily by-passed for me on this particular accordion because its small enough not to worry about it being too wide for some computer monitors.

I would like to make it clear though I have another accordion that is liquid using percentages that collapses perfectly for all size monitors. But that accordion doesn't need any links attached to images.

The advantage of using a liquid wide in percentages as opposed to a fixed width 700px is that it will collapse for smaller monitors instead of being cut-off at the end when it is forced to stay that width using fixed width tags.

But I've made the accordion reasonably small enough in width I can get away using a fixed width this time.

So this is solved for me, but leave it open if someone would like to get an answer. I wouldn't mind knowing either, but I'm done with this project.