|
To get the effect for these kind of scrollbars, you're not supposed to put a background image. Instead, I suggest that you use DIVs for the main image -- and good thing about it, is you don't need to cut it down. The main image is all you need :D Using DIVs, it should probably look something like this - <div style="position: absolute; top: 0px; left: 0px;"><img src="image.jpg" border="0" width="100" height="100"></div> OK, so you have your main image now. You have to customize your top/left (add in bottom and right if you want) and height/width, but you have basically an image there that acts as a background. The next step is the real code that you need. Place the follow code below your image code, and you're basically done. |
|
|
<div style="position:absolute; top:0px; left:0px; width:100px; height:100px; z-index:100; overflow: auto; padding: 0px; border: 0; background= none; filter: Alpha(Opacity=50, FinishOpacity=0);"><div style="margin-left: 0px; margin-right: 5px; margin-top: 0px" align="justify">
YOUR TEXT GOES HERE
</div></div> OK, here's how this works. The parts you can customize is the left, top, width, and height attribtues. Once again, you can switch left and top with right and bottom if it fits your needs better. The width and height is basically how big you want your text/scrolling area. The left and top is where you're putting the area. You should also change the "Opacity" to fit your own needs - right now, I have it on 45 - the more you increase the opacity, the more solid your scrollbar will seem. Z-index is basically prioritizing your codes. If one of your divs or images or anything has a higher z-index number than another, it will appear on top of the other. I set it at 100 so that your text should appear on top of your image. That's all. Keep in mind that whatever you put your opacity as, your text gets more transparent too. |
|
Source: Ere Serene