PDA

View Full Version : Javascript hover articles problem inserting images



jeffromad
07-31-2006, 10:41 AM
Hi, mburt managed to get together a script for me to create a similar affect to this: (the news bit where it hovers and shows another story)

http://www.avfc.premiumtv.co.uk/

So i got to work editing it and managed to do ok inserted images to the side articles but when it comes to inserting images into the main article part i cant do it / dont know how to.


Here is what im working on:
http://www.bromleyaces.com/website/home2.php

When i hover over a side article and it shows the big article at the moment its just text such as "article 4" but i want to include a image but i dont know how!

Can someone please help!??

Here is the script im using to do this: (im using dreamweaver btw)


<script language="javascript">
var orig = "Main Article is here and always will be"
var a = "Article 2"
var b = "Article 3"
var c = "Article 4"
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: #CC0000;
font-weight: bold;
}
.style4 {color: #CC0000}
-->
</style><body onLoad="origArticle()">
<table width="605" border="0">
<tr>
<td width="349" id="mainContent">
</td>
<td width="256" height="250" valign="top">
<p><a href="#" onmouseover="showArticle(a)" onMouseOut="origArticle()"><img src="file:///C|/Documents and Settings/Jeff/My Documents/Bromleyaces.com/test.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style3">Bromley see off Gillingham</span></a></p>
<p><a href="#" onmouseover="showArticle(a)" onMouseOut="origArticle()">Bromley won 1-0 at home to the Gills thanks to a second half Tony Boot strike.</a><br>
<br>

<a href="#" onMouseOver="showArticle(b)" onMouseOut="origArticle()"><img src="file:///C|/Documents and Settings/Jeff/My Documents/Bromleyaces.com/test.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style2 style4"><strong>Another new addition</strong></span></a></p>
<p><a href="#" onMouseOver="showArticle(b)" onMouseOut="origArticle()"><span class="style2">Peter Adeniyi becomes the latest arrival at Hayes Lane this summer. </span></a>
<br>
<br>
<a href="#" onMouseOver="showArticle(c)" onMouseOut="origArticle()"><img src="file:///C|/Documents and Settings/Jeff/My Documents/Bromleyaces.com/test.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style4"><strong>Bromley win away at Erith </strong></span></a></p>
<p><a href="#" onMouseOver="showArticle(c)" onMouseOut="origArticle()">Bromley won 1-0 away at Erith Town thanks to a Barry Moore freekick late on. </a></td>
</tr>

</table>

jeffromad
07-31-2006, 01:12 PM
anybody got even the slightest of ideas? :confused:

mburt
07-31-2006, 03:59 PM
You have to use escape characters like this:



var orig = "<img src=\"whatever.jpg\"><br>Main Article is here and always will be"
var a = "<img src=\"whatever.jpg\"><br>Article 2"
var a = "<img src=\"whatever.jpg\"><br>Article 3"
var a = "<img src=\"whatever.jpg\"><br>Article 4"
}

When you use quotes inside of quotes, you have to write them like this: \"

or.. (i don't recommend this, because if you have to use a onmouseover, or something like that, you have to you escape characters, inside escape characters.)

You could do this:


var a = '<img src="whatever.jpg">Article 2'

You can you double-quotes inside single-quotes

mburt
07-31-2006, 08:14 PM
Here is the full script:

<script language="javascript">
var orig = "Main Article is here and always will be<br><img src=\"orig.jpg\">"
var a = "Article 2<br><img src=\"a.jpg\">"
var b = "Article 3<br><img src=\"b.jpg\">"
var c = "Article 4<br><img src=\"c.jpg\">"
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: #CC0000;
font-weight: bold;
}
.style4 {color: #CC0000}
-->
</style><body onLoad="origArticle()">
<table width="605" border="0">
<tr>
<td width="349" id="mainContent">
</td>
<td width="256" height="250" valign="top">
<p><a href="#" onmouseover="showArticle(a)" onMouseOut="origArticle()"><img src="file:///C|/Documents and Settings/Jeff/My Documents/Bromleyaces.com/test.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style3">Bromley see off Gillingham</span></a></p>
<p><a href="#" onmouseover="showArticle(a)" onMouseOut="origArticle()">Bromley won 1-0 at home to the Gills thanks to a second half Tony Boot strike.</a><br>
<br>

<a href="#" onMouseOver="showArticle(b)" onMouseOut="origArticle()"><img src="file:///C|/Documents and Settings/Jeff/My Documents/Bromleyaces.com/test.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style2 style4"><strong>Another new addition</strong></span></a></p>
<p><a href="#" onMouseOver="showArticle(b)" onMouseOut="origArticle()"><span class="style2">Peter Adeniyi becomes the latest arrival at Hayes Lane this summer. </span></a>
<br>
<br>
<a href="#" onMouseOver="showArticle(c)" onMouseOut="origArticle()"><img src="file:///C|/Documents and Settings/Jeff/My Documents/Bromleyaces.com/test.jpg" alt="test" width="94" height="67" hspace="2" align="left" /><span class="style4"><strong>Bromley win away at Erith </strong></span></a></p>
<p><a href="#" onMouseOver="showArticle(c)" onMouseOut="origArticle()">Bromley won 1-0 away at Erith Town thanks to a Barry Moore freekick late on. </a></td>
</tr>

</table>

Twey
07-31-2006, 08:41 PM
var orig = "<img src=\"whatever.jpg\"><br>Main Article is here and always will be"
var a = "<img src=\"whatever.jpg\"><br>Article 2"
var a = "<img src=\"whatever.jpg\"><br>Article 3"
var a = "<img src=\"whatever.jpg\"><br>Article 4"Er... that won't work. :)

It's been fixed in the latest post, but I just thought I'd point it out in case somebody tried copying-and-pasting it.

mburt
07-31-2006, 08:52 PM
Ooops.. I copy and pasted the variables but forgot to rename them. :)