Question about some effect

Question

Hi,
I was trying to find out  how it's made the effect from the website below, I mean the one from the packages in the middle of the website (Domain names, Email hosting ect), on mouse over the image is brighter, is it just a 'image swap' effect but how they put the text then? The second question is about the fade in and out of the text on the bottom of the website (Where is: Why choose Fasthosts) is it possible to do it in Dreamweaver or is this flash animation?
Website: http://www.fasthosts.co.uk/
Regards

Answer 1

Ok, Gary gave the right answer about the middle section. Case closed.
About the effect you're talking about at the bottom (I suppose it's the "Why choose Fasthost?" section), it's in JavaScript.
To answer the question "is it possible to do it in Dreamweaver", you can do it by using Spry effect: Select the element you want to animate and in the Behaviors panel, select Effect and then the Appear/Fade (or Blind, which is similar). Enter the settings, and you have a Fade In effect (you may need to change the event, for example to use onLoad instead of onClick).
You can go further (for example, to have many sentences like the other website does) by looking at http://labs.adobe.com/technologies/spry/samples/htmlpanel/html_panel_two.html
If you don't want to use Spry, other JavaScript libraries (like jQuery) surely supports that.
Also, you can look at their code...:
2ticker.js
3Scrolls the "Why choose Fasthosts" content in the footer
4************************************/
5
6var intTotalItems = 0;
7var intLastNumber = 0;
8var objDiv, objContentDiv;
9var tickerDelay = 4000;
10
11function startTicker() {
12 objDiv = document.getElementById("contentscroller");
13 objContentDiv = document.getElementById("displayedcontent");
14
15 if (objDiv && objContentDiv) {
16 /* Loop through the contentscroller UL, give each LI
17 an ID and save the list in an array */
18 for (var i = 0; i < objDiv.childNodes.length; i++) {
19 var item = objDiv.childNodes[i];
20 if (item.nodeName.toLowerCase() == "li" && item.id == "") {
21 item.setAttribute("id", intTotalItems);
22 intTotalItems++;
23 }
24 }
25
26 // Add first load of content
27 objCurrentContent = document.getElementById(intLastNumber);
28 if (objCurrentContent)
29 objContentDiv.innerHTML = objCurrentContent.innerHTML;
30 intLastNumber++;
31
32 // And change it in ten seconds
33 setTimeout("changeContent()", tickerDelay);
34 }
35}
36
37// Display the next content snippet in the list
38function changeContent() {
39 objCurrentContent = document.getElementById(intLastNumber);
40 startOpacityChange('displayedcontent', 100, 0, 1000);
41
42 setTimeout("startOpacityChange('displayedcontent', 0, 100, 1000)", 1000);
43 setTimeout("document.getElementById('displayedcontent').innerHTML = objCurrentContent.innerHTML;", 1005);
44
45 if (intLastNumber == (intTotalItems - 1))
46 intLastNumber = 0;
47 else
48 intLastNumber++;
49
50 // Now do it all again (in ten seconds time)!
51 setTimeout("changeContent();", tickerDelay);
52}
53
54function startOpacityChange(strId, intOpacStart, intOpacEnd, intMillisec) {
55 var intSpeed = Math.round(intMillisec / 100);
56 var intTimer = 0;
57
58 if(intOpacStart > intOpacEnd) {
59 for(i = intOpacStart; i >= intOpacEnd; i--) {
60 setTimeout("changeOpacity(" + i + ",'" + strId + "')",(intTimer * intSpeed));
61 intTimer++;
62 }
63 }
64 else if(intOpacStart < intOpacEnd) {
65 for(i = intOpacStart; i <= intOpacEnd; i++) {
66 setTimeout("changeOpacity(" + i + ",'" + strId + "')",(intTimer * intSpeed));
67 intTimer++;
68 }
69 }
70}
71
72/* Change the opacity of a div (allowing for different browsers) */
73function changeOpacity(intOpacity, id) {
74 if(!IE7) {
75 var objLI = document.getElementById(id).style;
76
77 objLI.opacity = (intOpacity / 100);
78 objLI.MozOpacity = (intOpacity / 100);
79 objLI.KhtmlOpacity = (intOpacity / 100);
80 objLI.filter = "alpha(opacity=" + intOpacity + ")";
81 }
82}
83
84/* Detect IE7 to disable text fade */
85var IE7 = false;
86if(navigator.userAgent.indexOf("MSIE 7") != -1) IE7 = true;
and it's application:
<div id="helpquote">
<div id="contentscrollercontainer">
<ul id="contentscroller">
<li id="displayedcontent" style="opacity: 1;">Affordable web hosting for small businesses.</li>
<li id="0">We're the UK's largest web hosting company.</li>
<li id="1">Secure, reliable web hosting comes with experience: Established 1999.</li>
<li id="2">Small business web hosting services, from a company that knows your needs.</li>
<li id="3">Expert 24x7 email & national rate phone support for all customers.</li>
<li id="4">Affordable web hosting for small businesses.</li>
<li id="5">30 day web hosting money back guarantee & free instant online setup.</li>
<li id="6">Instant web hosting, including easy to use website builder.</li>
<li id="7">Internet access, domain registration, email hosting and web hosting all in one place.</li>
<li id="8">UK web hosting with UK servers.</li>
<li id="9">Secure, reliable, quality web hosting.</li>
<li id="10">Integrated domain name registration and web hosting.</li>
<li id="11">We're the largest UK domain name registrant.</li>
<li id="12">UK domain registration and web hosting gives priority search rankings.</li>
<li id="13">UK web hosting also offers you the best performance and reliability.</li>
<li id="14">Chosen by more web hosting professionals than any other hosting company.</li>
</ul>
</div>
</div>
Nelson