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:
<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. :)
Here is my orriginal 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. :)