The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to scroll a portion of a picture with links
Selenity
post Nov 8 2014, 09:40 PM
Post #1





Group: Members
Posts: 3
Joined: 8-November 14
Member No.: 21,791



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:

IPB Image

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 is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 8 2014, 11:35 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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>



But does the forum where you plan to use this allow HTML and CSS in sigs? That would be unusual.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Selenity
post Nov 9 2014, 10:02 AM
Post #3





Group: Members
Posts: 3
Joined: 8-November 14
Member No.: 21,791



QUOTE(pandy @ Nov 8 2014, 11:35 PM) *

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>


But does the forum where you plan to use this allow HTML and CSS in sigs? That would be unusual.


I don't need a scroll bar, I want it to scroll by itself, I guess that would make it a .gif?
You're right, I can't use HTML on the forum, only BBcode, so do I have to write this on a webpage and figure out a way to reference it in the BBCode?

This post has been edited by Selenity: Nov 9 2014, 10:02 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 9 2014, 11:14 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



So now you tell me.

No, you wont be able to reference a web page. I think your only option is to make the whole thing an animated GIF.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Selenity
post Nov 9 2014, 11:30 AM
Post #5





Group: Members
Posts: 3
Joined: 8-November 14
Member No.: 21,791



QUOTE(pandy @ Nov 9 2014, 11:14 AM) *

So now you tell me.

No, you wont be able to reference a web page. I think your only option is to make the whole thing an animated GIF.


Ok, thank you, it was still useful seeing as how I'll need it for a webpage too
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 9 2014, 05:19 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 10:30 AM