Jump to content

Noob needs help!

TheFilmGod

By TheFilmGod
in CSS Help

 Share

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
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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.