Results 1 to 6 of 6

Thread: Javascript hover articles problem inserting images

  1. #1
    Join Date
    Jul 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Javascript hover articles problem inserting images

    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)

    Code:
    <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>

  2. #2
    Join Date
    Jul 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    anybody got even the slightest of ideas?

  3. #3
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    You have to use escape characters like this:

    Code:
    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:
    Code:
    var a = '<img src="whatever.jpg">Article 2'
    You can you double-quotes inside single-quotes
    - Mike

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Here is the full script:
    Code:
    <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>
    - Mike

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  6. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Ooops.. I copy and pasted the variables but forgot to rename them.
    - Mike

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •