hello users welcome to gamer-avenue.net this site is up agian . don't be shy and start contribute agian . for any help msg Mroreniko or any other admin . thanks and have a great time !

How to scroll a portion of a picture with links

Post Reply
lamerodom
Posts: 3
Joined: Tue Feb 03, 2015 6:34 am

How to scroll a portion of a picture with links

Post by lamerodom » Tue Feb 03, 2015 6:37 am

I am trying to make a forum signature.
I want to make a portion of the image scroll.
In the scrolling portion will be multiple pictures containing links.

If you still can't visualize it, I've made this:

http://i59.tinypic.com/ht8da1.jpg



There's a bunch of things I'm not understanding how to do, how to make only a portion of the image scroll. Would you make the still image the background and somehow embed the scrolling image in the middle?
How can you make the images have links? An image map wouldn't work because the scrolling pictures are essentially an a .gif, right?

I'm not a coder of any kind so please keep that in mind when you're trying to explain things, and thank you in advance!



Also, for shits and giggles, if the code for this ended up being super long is there a way I could restrict the amount of characters? The forum's signature html space has a character limit.

User avatar
mrbooma
Posts: 12
Joined: Tue Jan 20, 2015 4:05 pm

Re: How to scroll a portion of a picture with links

Post by mrbooma » Tue Feb 03, 2015 6:38 am

Yeah, you could make the big image a background for a DIV in which you place a smaller DIV that holds the smaller images. Position the smaller DIV where you want it. The big DIV would be the size of the background image. You limit the width if the smaller DIV and make it scrollable with CSS (overflow: scroll or overflow: auto). To make it possible to position the small DIV absolute relative the big DIV, you need to make the big one position: relative. You need to add a little extra height to the small DIV to make room for the scrollbar. You probably need to read up a little about both HTML and CSS too. wink.gif

Something like this.

HTML
<div style="height: 400px; width: 600px; position: relative; background: url(http://img1.jurko.net/wall/paper/wallpaper_17828.jpg">
<div style="position: absolute; bottom: 40px; left: 40px; width: 200px; height: 105px; white-space: nowrap; overflow-x: scroll; overflow-y: hidden">
<img src="http://htmlhelp.com/icon/reference.gif" width="90" height="90" alt="blah blah">
<img src="http://htmlhelp.com/icon/reference.gif" width="90" height="90" alt="blah blah">
<img src="http://htmlhelp.com/icon/reference.gif" width="90" height="90" alt="blah blah">
<img src="http://htmlhelp.com/icon/reference.gif" width="90" height="90" alt="blah blah">
<img src="http://htmlhelp.com/icon/reference.gif" width="90" height="90" alt="blah blah">
<img src="http://htmlhelp.com/icon/reference.gif" width="90" height="90" alt="blah blah">
</div>
</div>

User avatar
Mroreniko
Site Admin
Posts: 24
Joined: Wed Jan 14, 2015 3:14 pm

Re: How to scroll a portion of a picture with links

Post by Mroreniko » Tue Feb 03, 2015 6:40 am

For a normal web page, you could consider using a slider. There are many different versions of those out there. So, try searching for one that suits your needs

Post Reply