TheFilmGod Posted November 10, 2007 Share Posted November 10, 2007 I've been searching on google for an hour and I haven't found anything yet! I want to re-create something similar to the news applet of --> bungie.net If you hover over the links, the news picture and info on the left change. I know you have to use CSS and maybe some javascript. Where can I find a tutorial to help me out with this? Quote Link to comment https://forums.phpfreaks.com/topic/76710-noob-needs-help/ Share on other sites More sharing options...
sKunKbad Posted November 10, 2007 Share Posted November 10, 2007 You will still need some pics, but this is code I made a while back that does what you want: style.css #rotater { border-right: #b9b8b2 1px solid; border-top: #b9b8b2 1px solid; font-size: 12px; border-left: #b9b8b2 1px solid; width: 443px; border-bottom: #b9b8b2 1px solid; font-family: Arial, sans-serif; position: relative; height: 200px;} #rotater a img { border-right: #b9b8b2 1px solid; left: 0px; border-top-style: none; border-left-style: none; position: absolute; TOP: 0px; border-bottom-style: none;} #rotater div { left: 161px; overflow: hidden; width: 282px; position: absolute; top: 0px; height: 200px;} #rotater div a { color: #2967c3;} #rotater ul { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none;} #rotater ul li { border-right: #b9b8b2 1px solid; border-top: #b9b8b2 1px solid; display: block; margin: -1px 0px 0px -1px; overflow: hidden; border-left: #b9b8b2 1px solid; width: 282px; border-bottom: #b9b8b2 1px solid;} * > html #rotater ul li { margin-bottom: -2px; height: 22px;} #rotater ul li a { display: block; padding-left: 22px; font-weight: bold; background: url(img/headline-bg.gif) no-repeat left 50%; width: 100%; padding-top: 4px; height: 18px; text-decoration: none;} * html #rotater ul li a { margin-top: 0px; overflow: hidden; width: 284px;} #rotater ul li a:hover { background: url(img/headline-bg-hover.gif) no-repeat left 50%; color: white;} #rotater p { padding-right: 2px; padding-left: 4px; left: 0px; padding-bottom: 2px; margin: 0px; width: 276px; padding-top: 2px; position: absolute; top: 138px; height: 100%; background-color: #fefefe;} * html #rotater p { width: 280px;} #rotater p a { font-size: 11px; width: 100%; color: black; height: 100%; text-decoration: none;} rotation.js <!-- window.onload = startRotation; function focusLink (n) { for (i = 0; i < numPics; i++) { if (i == n) { rotaterPics[i].style.zIndex = '1'; rotaterDescriptions[i].style.zIndex = '1'; rotaterListLinks[i].style.background = 'url(img/headline-bg-hover.gif) left no-repeat'; rotaterListLinks[i].style.color = 'white'; } else { rotaterPics[i].style.zIndex = '0'; rotaterDescriptions[i].style.zIndex = '0'; rotaterListLinks[i].style.background = 'url(img/headline-bg.gif) left no-repeat'; rotaterListLinks[i].style.color = '#2967c2'; } } } function rotateLink () { focusLink(currentLink); currentLink = (currentLink + 1) % numPics; rotaterTimer = setTimeout("rotateLink()", 3000); } function mouseoverRotater (n) { clearTimeout(rotaterTimer); focusLink(n - 1); } function mouseoutRotater (n) { currentLink = n - 1; clearTimeout(rotaterTimer); rotaterTimer = setTimeout("rotateLink()", 3000) } function startRotation () { var completeRotater = document.getElementById('rotater'); var rotaterList = completeRotater.getElementsByTagName('ul'); rotaterPics = completeRotater.getElementsByTagName('img'); rotaterDescriptions = completeRotater.getElementsByTagName('p'); rotaterListLinks = rotaterList[0].getElementsByTagName('a'); numPics = rotaterPics.length; currentLink = 0; rotateLink(); } --> rotation.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>news rotation test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="rotation.js"></script> </head> <body> <div class="leftColtopstories"> <div id="rotater"> <a href="http://www.whateverlink001.com"><img style="z-index: 1" height="200" alt="alt text for 001 pic" src="img/picone.jpg" width="160" /></a> <a href="http://www.whateverlink002.com"><img height="200" alt="alt text for 002 pic" src="img/pictwo.jpg" width="160" /></a> <a href="http://www.whateverlink003.com"><img height="200" alt="alt text for 003 pic" src="img/picthree.jpg" width="160" /></a> <a href="http://www.whateverlink004.com"><img height="200" alt="alt text for 004 pic" src="img/picfour.jpg" width="160" /></a> <a href="http://www.whateverlink005.com"><img height="200" alt="alt text for 005 pic" src="img/picfive.jpg" width="160" /></a> <a href="http://www.whateverlink006.com"><img height="200" alt="alt text for 006 pic" src="img/picsix.jpg" width="160" /></a> <div> <ul> <li><a onmouseover="mouseoverRotater(1)" onmouseout="mouseoutRotater(1)" href="http://www.whateverlink001.com">Headline number 1</a></li> <li><a onmouseover="mouseoverRotater(2)" onmouseout="mouseoutRotater(2)" href="http://www.whateverlink002.com">Headline number 2</a></li> <li><a onmouseover="mouseoverRotater(3)" onmouseout="mouseoutRotater(3)" href="http://www.whateverlink003.com">Headline number 3</a></li> <li><a onmouseover="mouseoverRotater(4)" onmouseout="mouseoutRotater(4)" href="http://www.whateverlink004.com">Headline number 4</a></li> <li><a onmouseover="mouseoverRotater(5)" onmouseout="mouseoutRotater(5)" href="http://www.whateverlink005.com">Headline number 5</a></li> <li><a onmouseover="mouseoverRotater(6)" onmouseout="mouseoutRotater(6)" href="http://www.whateverlink006.com">Headline number 6</a></li> </ul> <p style="z-index: 1"><a onmouseover="mouseoverRotater(1)" onmouseout="mouseoutRotater(1)" href="http://www.whateverlink001.com">This is the descriptive paragraph / link for headline 1.</a></p> <p><a onmouseover="mouseoverRotater(2)" onmouseout="mouseoutRotater(2)" href="http://www.whateverlink002.com">This is the descriptive paragraph / link for headline 2.</a></p> <p><a onmouseover="mouseoverRotater(3)" onmouseout="mouseoutRotater(3)" href="http://www.whateverlink003.com">This is the descriptive paragraph / link for headline 3.</a></p> <p><a onmouseover="mouseoverRotater(4)" onmouseout="mouseoutRotater(4)" href="http://www.whateverlink004.com">This is the descriptive paragraph / link for headline 4.</a></p> <p><a onmouseover="mouseoverRotater(5)" onmouseout="mouseoutRotater(5)" href="http://www.whateverlink005.com">This is the descriptive paragraph / link for headline 5.</a></p> <p><a onmouseover="mouseoverRotater(6)" onmouseout="mouseoutRotater(6)" href="http://www.whateverlink006.com">This is the descriptive paragraph / link for headline 6.</a></p> </div> </div> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/76710-noob-needs-help/#findComment-388474 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.