SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot frosco's Avatar
    Join Date
    Jul 2003
    Location
    WA state
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Another Multiple Scripts Question

    Hi all...I am pre-newbie to Javascripts. There is a javascript (from JS Kit) that I want to use, but I want to use it in three places on my page. Of course there are conflicts, but I don't know how to resolve.

    This is the <head> script
    Code:
    <script language="javascript">
    <!--
    
    /*Combo Box Image Selector:
    By JavaScript Kit (www.javascriptkit.com)
    Over 200+ free JavaScript here!
    */
    
    function showimage()
    {
    if (!document.images)
    return
    document.images.pictures.src=
    document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
    }
    //-->
    </script>
    and this is the <body> html:
    Code:
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100%"><form name="mygallery"><p><select
    name="picture" size="1" onChange="showimage()">
    <option selected value="me.gif">Picture of me</option>
    <option value="myaunt.gif">Picture of my aunt</option>
    <option value="brother.gif">Picture of my brother</option>
    </select></p>
    </form>
    </td>
    </tr>
    <tr>
    <td width="100%"><p align="center"><img src="me.gif" name="pictures" width="99"
    height="100"></td>
    </tr>
    </table>
    The URL for this free script is http://javascriptkit.com/script/cut173.shtml

    How can I run this three times on the same page?

    Thank you for your help. JS is in a list of several other things I need to learn....so in the meantime, here I am.



    (PS - In my defense I checked the answer on a similar question posted, but the script posted was so intricate that I couldn't translate that answer to mine. I tried! )

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The easiest way to help you here is to just do it, but promise me you'll study what I've done so you can learn a bit! I've bolded items of interest.
    Code:
    <script language="javascript">
    	<!--
    	/*Combo Box Image Selector:
    	By JavaScript Kit (www.javascriptkit.com)
    	Over 200+ free JavaScript here!
    	Modified by Peter Bailey
    	*/
     
    	function showimage( sel, num )
    	{
    		var img = document.getElementById( "picture" + num );
    		img.src = sel.options[sel.selectedIndex].value;
    	}
    
    	//-->
    </script>
    Code:
    <table border="0" cellspacing="0" cellpadding="0">
    	<tr>
    		<td width="100%">
    			<form name="mygallery">
    				<p>
    					<select size="1" onChange="showimage(this,1)">
    						<option selected value="me.gif">Picture of me</option>
    						<option value="myaunt.gif">Picture of my aunt</option>
    						<option value="brother.gif">Picture of my brother</option>
    					</select>
    				</p>
    			</form>
    		</td>
    	</tr>
    	<tr>
    		<td width="100%">
    			<p align="center">
    				<img src="me.gif" id="picture1" width="99" height="100">
    			</p>
    		</td>
    	</tr>
    </table>
     
    <table border="0" cellspacing="0" cellpadding="0">
    	<tr>
    		<td width="100%">
    			<form name="mygallery">
    				<p>
    					<select size="1" onChange="showimage(this,2)">
    						<option selected value="me.gif">Picture of me</option>
    						<option value="myaunt.gif">Picture of my aunt</option>
    						<option value="brother.gif">Picture of my brother</option>
    					</select>
    				</p>
    			</form>
    		</td>
    	</tr>
    	<tr>
    		<td width="100%">
    			<p align="center">
    				<img src="me.gif" id="picture2" width="99" height="100">
    			</p>
    		</td>
    	</tr>
    </table>
     
    <table border="0" cellspacing="0" cellpadding="0">
    	<tr>
    		<td width="100%">
    			<form name="mygallery">
    				<p>
    					<select size="1" onChange="showimage(this,3)">
    						<option selected value="me.gif">Picture of me</option>
    						<option value="myaunt.gif">Picture of my aunt</option>
    						<option value="brother.gif">Picture of my brother</option>
    					</select>
    				</p>
    			</form>
    		</td>
    	</tr>
    	<tr>
    		<td width="100%">
    			<p align="center">
    				<img src="me.gif" id="picture3" width="99" height="100">
    			</p>
    		</td>
    	</tr>
    </table>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I forgot to change the form names - you can rename them however you wish.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Zealot frosco's Avatar
    Join Date
    Jul 2003
    Location
    WA state
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I PROMISE, I PROMISE! I had actually done something similar by trying to rename variables, but I didn't know about the (sel, num) that you added. T'was the missing link! Thank you so much!

    Amber


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
  •