Jump to content

Noob needs help!

TheFilmGod

By TheFilmGod
in CSS Help

Recommended Posts

TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

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?

Link to comment
https://forums.phpfreaks.com/topic/76710-noob-needs-help/
Share on other sites
sKunKbad Advanced Member

sKunKbad

Posted
Posted

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>

Link to comment
https://forums.phpfreaks.com/topic/76710-noob-needs-help/#findComment-388474
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.