The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Linking Accordion Images to sites

View previous topic View next topic Go down

Solved Linking Accordion Images to sites

Post by runawayhorses on August 6th 2012, 12:34 pm

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/


Last edited by runawayhorses on August 6th 2012, 8:21 pm; edited 1 time in total

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Linking Accordion Images to sites

Post by Ahkrir on August 6th 2012, 12:44 pm

I don't know what you mean? Accordion?

Ahkrir
Forumember

Male Posts : 288
Reputation : 14
Language : English
Location : The Netherlands

http://smarterweb.go-board.com/forum

Back to top Go down

Solved Re: Linking Accordion Images to sites

Post by runawayhorses on August 6th 2012, 2:14 pm

@Ahkrir wrote:I don't know what you mean? Accordion?
Look at the tutorial here:

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

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Linking Accordion Images to sites

Post by Nera. on August 6th 2012, 2:26 pm

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="http://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.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Linking Accordion Images to sites

Post by runawayhorses on August 6th 2012, 2:30 pm

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?

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Linking Accordion Images to sites

Post by Nera. on August 6th 2012, 2:39 pm

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.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Linking Accordion Images to sites

Post by runawayhorses on August 6th 2012, 2:47 pm

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/

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Linking Accordion Images to sites

Post by MrMax on August 6th 2012, 7:19 pm

I use to have this problem.

MrMax
New Member

Posts : 2
Reputation : 1
Language : English

Back to top Go down

Solved Re: Linking Accordion Images to sites

Post by runawayhorses on August 6th 2012, 8:37 pm

@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.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum