Help in combining two scripts

jonnymorris · #1 (**permalink**) Jul 22nd, 2007, 10:42

Hello

I have found two javascript techniques / scripts that achieve the effect I'm looking for on my page but they both make use of the mouseover event, so don't work together.

I'm a javascript novice but not new to programming, I wonder if someone could advise me on the best way of combining the two scripts. One is not really a script but just a little bit of inline code which I place within a link tag:

Code: Select all

onmousedown="document.mainimage.src='images/hawker_leaves.jpg'"

Here's my page:
http://www.jonathanmortimer.co.uk/te...tlinks_js.html

You may notice that I'm using mousedown and mouseup instead of mouseover, this is a work around that I would rather not have to use - I would like to use just one of these (mouseover, mouseup, mousedown) to get the text and image to be replaced.

Here's the swaptext javascript file:
http://www.jonathanmortimer.co.uk/te...es/swaptext.js

One other related question is does anyone know why javascript code would appear to cancel CSS hover in Safari?

Paramiliar · #2 (**permalink**) Jul 26th, 2007, 20:29

Well that swaptext script is rather huge.

I am unsure on how you would use this script but here it is anyways.

Code: Select all

<script type="text/javascript" langauge="Javascript">
function thefunction(NEWTEXT, NEWIMAGE){
     document.getElementById("imagecontainer").innerHTML = '<img name="mainimage" src="'+NEWIMAGE+'" alt="Main image" style="background-color: rgb(221, 221, 221);" height="450" width="600"><p id="description">'+NEWTEXT+'</p>';
}
</script>
<a href="javascript:void(0);" onclick="thefunction('textinhere', 'imagehere');">image 1</a>

Infact that should work for you and only takes a few lines of code! instead of the 60+ lines of code.

jonnymorris · #3 (**permalink**) Jul 27th, 2007, 12:41

Quote:

Originally Posted by Paramiliar

I am unsure on how you would use this script but here it is anyways.

Code: Select all

<script type="text/javascript" langauge="Javascript">
function thefunction(NEWTEXT, NEWIMAGE){
     document.getElementById("imagecontainer").innerHTML = '<img name="mainimage" src="'+NEWIMAGE+'" alt="Main image" style="background-color: rgb(221, 221, 221);" height="450" width="600"><p id="description">'+NEWTEXT+'</p>';
}
</script>
<a href="javascript:void(0);" onclick="thefunction('textinhere', 'imagehere');">image 1</a>

Hmm, I tried this in my page but it didn't seem to do anything

Any suggestions?

Here's how I inserted it:

Code: Select all

<div id="thumbnails_border">
    <a href="javascript:void(0);" title="Hawker dragonfly" onclick="thefunction('Hawker dragonfly', 'images/hawker_leaves.jpg');">
        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Dragonfly"/>
    </a>
</div>

Paramiliar · #4 (**permalink**) Jul 27th, 2007, 13:09

did you get any error messages? as that should have worked. Also post the full source code of your site

jonnymorris · #5 (**permalink**) Jul 27th, 2007, 14:00

Quote:

Originally Posted by Paramiliar

did you get any error messages? as that should have worked. Also post the full source code of your site

No error messages, just nothing happened.

Here's the page source:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Jonathan Mortimer" />
    <meta name="keywords" content="graphic design, photography, photograph, gallery, wildlife" />
    <meta name="description" content="Wildlife Photography in Yorkshire" />

    <title>Nature Photography in Yorkshire by Jonathan Mortimer</title>
    
    <style type="text/css" media="all">
        @import "styles/stylesheet_nature.css";
    </style>
    

    <script type="text/javascript" langauge="Javascript">
        function thefunction(NEWTEXT, NEWIMAGE) {
             document.getElementById("imagecontainer").innerHTML = '<img name="mainimage" src="'+NEWIMAGE+'" alt="Main image" style="background-color: rgb(221, 221, 221);" height="450" width="600"><p id="description">'+NEWTEXT+'</p>';
        }
    </script>

    
</head>

<body>
<div id="shadow_outer">

<div id="container">
 <div id="header">
     
    <div id="headings">
        <h1>Nature photography in Yorkshire</h1>
         <h2>by Jonathan Mortimer</h2>
     </div>
 </div>


 
 <div id="leftarea">
         
       <div id="links">
             <a href="insects.html">Insects</a>
             <a href="beasties.html">Beasties</a>
             <a href="fauna.html">Fauna</a>
             <a href="scenery.html">Scenery</a>
             <a href="ponds.html">Ponds</a>
               

       </div>

      <div class=imagecontainer>
        <img name="mainimage" src="images/tortoiseshell.jpg" width="600" height="450" alt="Main image" style="background-color: #dddddd" />
          <p id="description">Tortoise Shell butterfly</p>
      </div>

 </div>
 
 <div id="rightarea">
       <div class="scroll">  
                <!-- list of links begins here. There will be no more than 8 links per page -->
                <div class="thumbnails" id="swap">
                    <div id="thumbnails_border">
                    <a href="javascript:void(0);" title="Tortoise Shell butterfly" onclick="thefunction('Tortoise Shell butterfly', 'images/toroiseshell.jpg');">
                        <img name="tortoiseshell" src="images/tb_tortoiseshell.jpg" width="100" height="75" border="none" alt="Butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a href="javascript:void(0);" title="Hawker dragonfly" onclick="thefunction('Hawker dragonfly', 'images/hawker_leaves.jpg');">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Dragonfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="tortoiseshell" src="images/tb_tortoiseshell.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="tortoiseshell" src="images/tb_tortoiseshell.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
               </div>  
        </div>                 

 </div>
 
</div><!--end container div -->

</div>

</body>

Paramiliar · #6 (**permalink**) Jul 28th, 2007, 11:09

ah its because i missread the code this is a 2 second fix The DIV was missing the ID tag, i saw the CLASS tag instead (btw you really should incase all HTML attributes in either "" or '')

here is the full code

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Jonathan Mortimer" />
    <meta name="keywords" content="graphic design, photography, photograph, gallery, wildlife" />
    <meta name="description" content="Wildlife Photography in Yorkshire" />

    <title>Nature Photography in Yorkshire by Jonathan Mortimer</title>
    
    <style type="text/css" media="all">
        @import "styles/stylesheet_nature.css";
    </style>
    

    <script type="text/javascript" langauge="Javascript">
        function thefunction(NEWTEXT, NEWIMAGE) {
             document.getElementById("thecontainer").innerHTML = '<img name="mainimage" src="'+NEWIMAGE+'" alt="Main image" style="background-color: rgb(221, 221, 221);" height="450" width="600"><p id="description">'+NEWTEXT+'</p>';
        }
    </script>

    
</head>

<body>
<div id="shadow_outer">

<div id="container">
 <div id="header">
     
    <div id="headings">
        <h1>Nature photography in Yorkshire</h1>
         <h2>by Jonathan Mortimer</h2>
     </div>
 </div>


 
 <div id="leftarea">
         
       <div id="links">
             <a href="insects.html">Insects</a>
             <a href="beasties.html">Beasties</a>
             <a href="fauna.html">Fauna</a>
             <a href="scenery.html">Scenery</a>
             <a href="ponds.html">Ponds</a>
               

       </div>

      <div class="imagecontainer" id="thecontainer">
        <img name="mainimage" src="images/tortoiseshell.jpg" width="600" height="450" alt="Main image" style="background-color: #dddddd" />
          <p id="description">Tortoise Shell butterfly</p>
      </div>

 </div>
 
 <div id="rightarea">
       <div class="scroll">  
                <!-- list of links begins here. There will be no more than 8 links per page -->
                <div class="thumbnails" id="swap">
                    <div id="thumbnails_border">
                    <a href="javascript:void(0);" title="Tortoise Shell butterfly" onclick="thefunction('Tortoise Shell butterfly', 'images/toroiseshell.jpg');">
                        <img name="tortoiseshell" src="images/tb_tortoiseshell.jpg" width="100" height="75" border="none" alt="Butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a href="javascript:void(0);" title="Hawker dragonfly" onclick="thefunction('Hawker dragonfly', 'images/hawker_leaves.jpg');">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Dragonfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="tortoiseshell" src="images/tb_tortoiseshell.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="tortoiseshell" src="images/tb_tortoiseshell.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
               </div>  
        </div>                 

 </div>
 
</div><!--end container div -->

</div>

</body>

jonnymorris · #7 (**permalink**) Jul 28th, 2007, 11:54

Quote:

Originally Posted by Paramiliar

ah its because i missread the code this is a 2 second fix The DIV was missing the ID tag, i saw the CLASS tag instead (btw you really should incase all HTML attributes in either "" or '')

Great! That did the trick

Thanks for the tip, I do try to keep my tags in "" or '' but sometimes they slip through.

Btw I don't suppose you know of any way to stop Firefox drawing a little dotted box around HTML <a> tagged items I click on? It kinda spoils the look of the graphics, doesn't happen in Safari.

UPDATE: I discovered how to remove those annoying dotted borders around html image links. It can be removed by going to the about:config page and setting browser.display.focus_ring_width to 0. Instantly takes effect.

Paramiliar · #8 (**permalink**) Jul 28th, 2007, 15:20

weird my firefox doesn't do that :S

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
want this scripts...	skyonline	JavaScript Forum	2	Jun 15th, 2008 22:52
Scripts	MetallicWarfare	PHP Forum	0	Aug 3rd, 2007 12:03
Need help combining 2 Javascripts	seargentpepper7	JavaScript Forum	3	Jun 11th, 2007 19:22
need some scripts	habitatxskate	Web Page Design	7	Feb 12th, 2007 19:04
Combining fixed and relative widths	hessodreamy	Web Page Design	5	Feb 10th, 2006 13:14

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Help in combining two scripts