PDA

View Full Version : How to create this



dv_evan
25 Jun 2007, 01:27 PM
Hello everyone,
I am new to webdesigning and would like your input.

I was visiting this website download.com , I saw that on the page there is an area with a large picutre and four different buttons. When I click on each button a different picture with text appears. I would like to do something like that on my personal website, I would like if you can let me know how to do this and which software was used in this.

Thanks in advance for any advice!

Dave

Wickham
29 Jun 2007, 12:51 PM
It's a lot of code:-


<div id="Carousel">
<div class="slide dark"><img class="bg" src="http://i.d.com.com/i/dl/doors/carousel_bg_iphone.jpg" /><div class="frame">

<div class="text">
<h1><a href="/4520-13271_1-6685260-1.html?tag=slide_hed">Will you buy an iPhone?</a></h1>
Get all of the info you need to know about the much anticipated <a href="/4520-13271_1-6685260-1.html?tag=slide_txt"><b>iPhone</b></a> or <a href="/8301-1_105-9734277-1.html?tag=slide_txt"><b>tell us</b></a> whether it's all hype or the real deal.<br />
<a href="/4520-13271_1-6685260-1.html?tag=slide_more">&raquo; <b>Read more</b></a>
</div>
<div class="image screen">
</div>
</div></div>

<div class="slide light"><img class="bg" src="http://i.d.com.com/i/dl/doors/carousel_bg_photoshopcs3.jpg" /><div class="frame">

<div class="text">
<h1><a href="/Adobe-Photoshop-CS3-Extended/3000-2192_4-10011172.html?tag=slide_hed">Adobe Photoshop CS3 Extended</a></h1>
Building on the success of CS2, Adobe Photoshop CS3 Extended adds live filters and lets you edit 3D content.<br />
<a href="/Adobe-Photoshop-CS3-Extended/3000-2192_4-10011172.html?tag=slide_more">&raquo; <b>Download it now</b></a>
</div>
<div class="image screen">
</div>
</div></div>

<div class="slide light"><img class="bg" src="http://i.d.com.com/i/dl/doors/carousel_bg_findfiles.jpg" /><div class="frame">

<div class="text">
<h1><a href="/8301-2007_4-9734948-12.html?tag=slide_hed">Find files faster</a></h1>
Can you find information online faster than you can find a simple document on your hard drive? Get up to speed with recommended desktop-search solutions.<br />
<a href="/8301-2007_4-9734948-12.html?tag=slide_more">&raquo; <b>Read more</b></a>
</div>
<div class="image screen">
</div>
</div></div>

<div class="slide dark"><img class="bg" src="http://i.d.com.com/i/dl/doors/carousel_bg_xpvista.jpg" /><div class="frame">

<div class="text">
<h1><a href="/Vista-Transformation-Pack/3000-2106_4-10631175.html?tag=slide_hed">Vista Transformation Pack 7</a></h1>
If you want the desktop style of Windows Vista on your XP computer, look no further than this updated Vista skin.<br />
<a href="/Vista-Transformation-Pack/3000-2106_4-10631175.html?tag=slide_more">&raquo; <b>Download it now</b></a>
</div>
<div class="image screen">
</div>
</div></div>


<div id="CaroLinks">
<div class="bubble">
<img class="bbg" src="/i/dl/doors/carousel_button.gif">
<a href="/4520-13271_1-6685260-1.html?tag=bubble"><img src="http://i.d.com.com/i/dl/doors/carousel_btn_iphone.jpg" width="35" height="26" border="0" /> Is the iPhone all hype or the real deal?</a>
</div>
<div class="bubble">
<img class="bbg" src="/i/dl/doors/carousel_button.gif">
<a href="/Adobe-Photoshop-CS3-Extended/3000-2192_4-10011172.html?tag=bubble"><img src="http://i.d.com.com/i/dl/doors/carousel_btn_photoshopcs3.jpg" width="35" height="26" border="0" /> Photoshop CS3 Extended adds 3D to the mix</a>
</div>
<div class="bubble">
<img class="bbg" src="/i/dl/doors/carousel_button.gif">
<a href="/8301-2007_4-9734948-12.html?tag=bubble"><img src="http://i.d.com.com/i/dl/doors/carousel_btn_findfiles.jpg" width="35" height="26" border="0" /> Find local files on your hard drive faster</a>
</div>
<div class="bubble">
<img class="bbg" src="/i/dl/doors/carousel_button.gif">
<a href="/Vista-Transformation-Pack/3000-2106_4-10631175.html?tag=bubble"><img src="http://i.d.com.com/i/dl/doors/carousel_btn_xpvista.jpg" width="35" height="26" border="0" /> Give your Windows XP machine a Vista look</a>
</div>
</div>
</div><!-- /Carousel -->

Most of the styles are on this stylesheet:-
http://i.d.com.com/css/dl/rb/dl_frontdoor.css

I doubt whether I have listed all the code, there is some javascript as well.

You should not use the code without permission, but the general principles can be followed if they are general knowledge.