mouseover - news headlines

WDH · December 8th, 2007, 12:15 PM

Hi,
I am trying to create a news headlines section for on my website so that you can mouseover the headline and then the story will appear to the side of it with no clicking involved.

http://s121.photobucket.com/albums/o...t=SANY0023.flv

Here is a video showing the type of thing i am looking for. Any help with code appreciated.

Rakuli · December 8th, 2007, 12:41 PM

Well this is a reasonably simply thing to do

first start by defining some css

Code:

.newsDivs
{
    display: none;
}

then a small script in the top of your document

Code:

var currentNews = false; // will hold reference to last opened news item so it can be closed for a new one

function toggleNews (id) // function takes an element id that will be toggled
{
       var newsItem = document.getElementById (id);
       // close the old news item if there is one
       if (currentNews)
           currentNews.style.display = 'none';
        
       // now display the new div
           newsItem.style.display = 'block';
       // store it as current item
           currentItem = newsItem;
}

Okay so that's your javascript, now all you need to do is put the news content into divs in your html and give them the class "newsDivs" and a unique id. Then on the links that you want to toggle the displays, put onmouseover="toggleNews('divId')";

EG

HTML Code:

<a href="#" onmouseover="toggleNews('div1')">Show div1</a>
<a href="#" onmouseover="toggleNews('div2')">Show div2</a>

<div class="newsDivs" id="div1"> Hello, I am some random content created by rakuli to show this script</div>
<div class="newsDivs" id="div2">No! <em>I</em> am the aforementioned random content</div>

That should sort ya out

WDH · December 8th, 2007, 12:47 PM

Cheers, So top code goes in .css 2nd code goes at the top of my html document and the last is the usual page code where i want it?
I will give it a try now.

edit **
Ive tried out your code but i cant get it to work on my site. Whenever the code is placed at the otp of the html doucument it appears as text on the site and isnt hidden. Would you be able to help?

Rakuli · December 8th, 2007, 12:52 PM

Quote:

--------------------------------------------------------------------------------

Cheers, So top code goes in .css 2nd code goes at the top of my html document and the last is the usual page code where i want it?
I will give it a try now.

yup that's right

Rakuli · December 10th, 2007, 01:18 AM

Quote:

Ive tried out your code but i cant get it to work on my site. Whenever the code is placed at the otp of the html doucument it appears as text on the site and isnt hidden. Would you be able to help?

You need to make sure your CSS is set up correctly and that each div inherits the .newsDivs class. In doing so it will ensure that the default display for the divs is none