Hover script ive got needs changing

**jeffromad** · 03-27-2007, 11:09 AM

Right i came on here a while ago and got help with the original code which was great and i thank them again but i just would like some changes to it but im stuck again.

Here is my orriginal code:

Code:

<script language="javascript">
var orig = "<img src=\"http://www.bromleyaces.com/blackwidows/images/dymond.jpg\"><b>Widows appoint assistant manager</b><br>In a press conference earlier today Black Widows announced Dymond as their new assistant manager for the 2007 campaign."
var a = "<img src=\"http://www.bromleyaces.com/blackwidows/images/jeffromad.jpg\"><b>Black prepare for pre season</b><br>The Black Widows have been preparing for pre season at their camp and are looking forward to kick starting their games."
var b = "<img src=\"http://www.bromleyaces.com/blackwidows/images/weblaunchL.jpg\"><b>Widows website up and running</b><br>The Black Widows club website is now fully uptodate and will be updated week in week out."
var c = "<img src=\"http://www.bromleyaces.com/blackwidows/images/gallery.jpg\"><b>Black Widows online gallery</b><br>The Black Widows online gallery will be updated shortly with uptodate player and match photos."
function showArticle(which) {
mainContent.innerHTML = which
}
function origArticle() {
mainContent.innerHTML = orig
}
</script>
</head>
<style type="text/css">
<!--
a {
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
}
a:link {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
}
.style3 {
	color: #000000;
	font-weight: bold;
}
.style4 {color: #CC0000}
-->
</style><body onLoad="origArticle()">
<table width="605" border="0">
<tr>
<td width="320" valign="top" id="mainContent">
</td>
<td width="256" height="250" valign="top">
  <p><a href="#"  onmouseover="showArticle(a)" onMouseOut="origArticle()"><img src="http://www.bromleyaces.com/blackwidows/images/jeffromadsmall.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style3">Pre season preparation</span></a></p>

  <p><a href="#"  onmouseover="showArticle(a)" onMouseOut="origArticle()">The Widows have been hard at work ready for the up and coming pre season schedule.</a><br>
    <br>

    <a href="#" onMouseOver="showArticle(b)" onMouseOut="origArticle()"><img src="http://www.bromleyaces.com/blackwidows/images/weblaunch.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style3"><strong>Website operational</strong></span></a></p>
  <p><a href="#" onMouseOver="showArticle(b)" onMouseOut="origArticle()"><span class="style2">The official Black Widows club website is fully up and running now. Finally.</span></a>
      <br>
      <br>
      <a href="#" onMouseOver="showArticle(c)" onMouseOut="origArticle()"><img src="http://www.bromleyaces.com/blackwidows/images/gallerysmall.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style3"><strong>Online Gallery</strong></span></a></p>

  <p><a href="#" onMouseOver="showArticle(c)" onMouseOut="origArticle()">Black Widows online gallery will be updated shortly with new and uptodate images. </a></td>
</tr>

</table>
</DIV>
<DIV style="position:absolute;left:382px;top:13px;width:150px;height:12px;z-index:4" align="left">

<SCRIPT language="JavaScript">
<!--
function turnOff( targetId ){
     if (document.getElementById){
        target = document.getElementById( targetId );
                target.style.display = "none";
            }
        }
        
function turnOn( targetId ){
     if (document.getElementById){
        target = document.getElementById( targetId );
                target.style.display = "block";
				
            }
        }
-->
</SCRIPT>

Here is the code in use:
http://www.bromleyaces.com/example.htm

Notice how you hover over the news article it shows in the main article space.

HOWEVER this is what i want:
http://www.crawleytownfc.net/home.php?pageid=1

Notice that the smaller news articles, you can scroll down for other articles which is what i want to do! AND when you hover over an article it DOESNT change back to the main article it stays until you hover over another image.

SO im trying to do the following.
- add new contnet down the right hand side which users have to scroll to find more articles.
- When an article is hovered then the mouse comes of the image, the main article doesnt re appear in the big section the news article that was last hovered over stays until another one is hovered over.

All help appreciated and much needed. EVEN IF YOU COULDNT CHANGE MY SCRIPT BUT COULD GET ME GOING WITH A NEW ONE THAT WOULD HELP.

Thanks in advance.

**jeffromad** · 03-27-2007, 05:15 PM

Anyone over any help what so ever on this?

All help appreciated cheers.

**Bob90** · 03-28-2007, 02:44 PM

Just take out the onmouseout events.

The onmouseout event returns the story to the original

**jeffromad** · 03-29-2007, 10:26 AM

Cheers for that. Thats helped me sort out that problem.

But how do i go about the right hand side menu articles so i can add loads and users simply scroll down to see older ones???

Anyone help?

**mburt** · 03-29-2007, 10:44 AM

The css property overflow:

Code:

overflow:auto;

**jeffromad** · 03-29-2007, 04:02 PM

Ah ok so where do i put that? Sorry im crap at this, sorry for all the hastle.

Anyone now where i should put this:

overflow:auto;

in the code at the top?

**mburt** · 03-29-2007, 04:39 PM

Adding to the appropiate element that needs to have the scroll function:

Code:

<.... style="overflow:auto;">

**jeffromad** · 03-29-2007, 04:42 PM

Well i want the right hand column where the three little articles are i want to add some more and allow them to scroll down, so where would i put that?

**mburt** · 03-29-2007, 04:49 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Untitled Page</TITLE>
<META name="GENERATOR" content="Created by BlueVoda">
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000">
<DIV style="position:absolute;left:9px;top:13px;width:150px;height:150px;z-index:0" align="left">
<script language="javascript">
var orig = "<img src=\"http://www.bromleyaces.com/blackwidows/images/dymond.jpg\"><b>Widows appoint assistant manager</b><br>In a press conference earlier today Black Widows announced Dymond as their new assistant manager for the 2007 campaign."
var a = "<img src=\"http://www.bromleyaces.com/blackwidows/images/jeffromad.jpg\"><b>Black prepare for pre season</b><br>The Black Widows have been preparing for pre season at their camp and are looking forward to kick starting their games."
var b = "<img src=\"http://www.bromleyaces.com/blackwidows/images/weblaunchL.jpg\"><b>Widows website up and running</b><br>The Black Widows club website is now fully uptodate and will be updated week in week out."
var c = "<img src=\"http://www.bromleyaces.com/blackwidows/images/gallery.jpg\"><b>Black Widows online gallery</b><br>The Black Widows online gallery will be updated shortly with uptodate player and match photos."
function showArticle(which) {
mainContent.innerHTML = which
}
function origArticle() {
mainContent.innerHTML = orig
}
</script>
</head>
<style type="text/css">
<!--
a {
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
}
a:link {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
}
.style3 {
	color: #000000;
	font-weight: bold;
}
.style4 {color: #CC0000}
-->
</style><body onLoad="origArticle()">
<table width="605" border="0">
<tr>

<td width="320" valign="top" id="mainContent">
</td>
<td width="256" height="250" valign="top">
<div style="overflow-y:scroll;height:250px;">
  <p><a href="#"  onmouseover="showArticle(a)" onMouseOut="origArticle()">
	<img src="jeffromadsmall.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style3">Pre 
	season preparation</span></a></p>

  <p><a href="#"  onmouseover="showArticle(a)" onMouseOut="origArticle()">The 
	Widows have been hard at work ready for the up and coming pre season 
	schedule.</a><br>
    <br>

    <a href="#" onMouseOver="showArticle(b)" onMouseOut="origArticle()">
	<img src="weblaunch.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style3"><strong>Website 
	operational</strong></span></a></p>
  <p><a href="#" onMouseOver="showArticle(b)" onMouseOut="origArticle()"><span class="style2">
	The official Black Widows club website is fully up and running now. Finally.</span></a>

      <br>
      <br>
      <a href="#" onMouseOver="showArticle(c)" onMouseOut="origArticle()">
	<img src="gallerysmall.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style3"><strong>Online 
	Gallery</strong></span></a></p>

  <p><a href="#" onMouseOver="showArticle(c)" onMouseOut="origArticle()">Black 
	Widows online gallery will be updated shortly with new and uptodate images. </a>
	</div>
	</td>
</tr>

</table>
</DIV>
<DIV style="position:absolute;left:382px;top:13px;width:150px;height:12px;z-index:4" align="left">

<SCRIPT language="JavaScript">
<!--
function turnOff( targetId ){
     if (document.getElementById){
        target = document.getElementById( targetId );
                target.style.display = "none";
            }
        }
        
function turnOn( targetId ){
     if (document.getElementById){
        target = document.getElementById( targetId );
                target.style.display = "block";
				
            }
        }
-->
</SCRIPT>

</DIV>
</BODY>
</HTML>

**jeffromad** · 03-29-2007, 04:53 PM

Thats great thank you!!!

Exactly what i needed!

Cheers again!

Thread: Hover script ive got needs changing

Thread Tools

Search Thread

Hover script ive got needs changing

Simple Pimple

Bookmarks

Bookmarks

Posting Permissions