Scrolling images design

Hey

I was looking for a code for scrolling images, so far I have only come across simple codes which just scroll, I would like text you could hover over to bring up the picture an example of this is on this website: http://www.footlocker.com/

If there is anything like this on forumotion please redirect me or help me out

Forumotion has a fully functional JavaScript panel, if you tell me what exactly you want, I could try to come up with some code for you.

Could you replicate something similar to what footlocker has in the link on the OP, I was looking to have 10 links to pictures

bump

Is there anyone else able to help out with this

I see what you mean.

You want it to be like there that selecting one button causes the whole thing to slide and hovering over the images causes the images to change?

yup, hovering over the button causes the images to slide to the corresponding image and the buttons and images should link to a page
exactly how it functions on footlocker

I would know how to make images change when hovering over them, but the sliding mechanism is... well, I could copy the code, but that's not your aim, at least it's not mine and I wouldn't do it.

there is no point copying the code lol, I dont mind not have the sliding mechanism as long as the links work, I can try to add the sliding feature later

You could try to add this in your HTML page.

Code:

<script>(new Image()).src = "your image URL here";</script>
<img src="your original image URL here" onmouseover="this.src='image URL you specified in the script above'" onmouseout="this.src='your original image URL'" />
<!-- your further HTML document -->

Looks nice but it doesnt link to another page, need it to be a hyperlink

Right.

Do this...

Code:

<script>/* script from above */</script>
<a href="your reference link here" target="_blank">
<img ... />
</a>

It didnt work

Replace <img ... /> with the img tag from my first code I gave you, as in... <img src="your original image URL here" onmouseover="this.src='new image URL here'" onmouseout="this.src='original image URL here'" />

I tried doing that, it just created another image on the side but the link i put in is dead

Mind posting what exactly you typed in?

Oh, sorry, I was a bit misleading there, I admit.

Use this, instead:

Code:

<script>(new Image()).src = "http://i.imgur.com/lqrLPnM.png";</script>
<a href="http://help.forumotion.com/t123825-" target="_blank">
<img src="http://i.imgur.com/iHY1cEl.png" onmouseover="this.src='http://i.imgur.com/lqrLPnM.png'" onmouseout="this.src='http://i.imgur.com/iHY1cEl.png'" />
</a>

It works, thanks
Is there a way to have the new image appear above the button?

Which button are you refering to, again? It helps if you provide screenshots what you have and what you need

I'll have a look at it later, I'm currently in school. Expect me to be done in 3-4 hours.

Alright thanks

what are you trying to do? just a simple mouseover image that is clickable link?

YOUR LINK/URL HERE = The link you want it to click to.

MIAN DIRECT IMAGE HERE = Is your main image.
Be sure to use a direct image link.
That goes in twice.

MOUSE OVER DIRECT IMAGE HERE = Whatever image you want to appear when you mouse over the image. Also be sure to use a direct image link.

Code:


<a href="YOUR LINK/URL HERE" class="postlink" target="_blank" rel="nofollow"><img src="MIAN DIRECT IMAGE HERE" onmouseover="this.src='MOUSE OVER DIRECT IMAGE HERE';" onmouseout="this.src='MAIN DIRECT IMAGE HERE;" /></a>



Example here

Im looking for something similar to what footlocker have (http://www.footlocker.com/), I wanted buttons at the bottom and when you hover over the buttons an corresponding images appears above (banner)

That will be some kind of slider of images, which has different effects. You can search one in google, mate.

I cant find one for forumotion, wow slider is good but you cant use it with forumotion

You can try testing this in an HTML document (I haven't tested this):

Spoiler:

Im not sure where to add this