JavaScript - If Image - Show Image Else Show Default Icon?

Hey all,

I want a background image of a tick to appear in each coloured box in my attached image onclick. When another coloured box is clicked I want the image to show in that one and then hidden in the previous one clicked. There should be no ticks shown on page load.

I'm clueless as to how to do this.

Here's my code for the image attached:

Code:

<div class="colour-picker">
	<div class="tick-off" id="red" onclick="changeclass();">
	</div>
	<div class="tick-off" id="blue" onclick="changeclass();">
	</div>
	<div class="tick-off" id="black" onclick="changeclass();">
	</div>
	<div style="float: right; margin-right: 6px;">Choose colour:</div>
</div>

CSS:

Code:

.colour-picker {
    float: right;
    margin: 0 10px 0 0;
    line-height: 30px;
    text-shadow: #292929 2px 1px 1px;
    font-size: 15px;
    color: #FFF;
    padding: 0px;
    height: 32px;
    font-weight: normal;
}

.colour-picker #red {
	background-color: red;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker #blue {
	background-color: blue;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker #black {
	background-color: black;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker .tick-off {
	background-image: none;
}

.colour-picker .tick-on {
	background-image: url(images/colour-tick.png);
	background-repeat: no-repeat;
	background-position: center center;
}

Can anyone tell me how to do it?

Thanks!

Adam

So I opted to use JavaScript & PHP (instead of Flash) to create a sort-of "t-shirt designer" -- basically, it's a gallery-type script that allows users to scroll through t-shirt styles, swap colors, and so on, prior to reaching the actual design tool. And I'm starting to regret.

It's actually working very well so far, except for one thing: I want the t-shirt option that the user selects to link the user to the design tool. The "gallery" already has an image for each possible option that displays whenever the user selects a combination, but I want to make that image is a clickable link.

I have no idea where to start -- I know next to nothing about javascript -- and to accomplish this in Flasjh I'd have to start this stupid basic thing all over again from scratch, and it would defeat the point of not using Flash in the first place, so... any ideas or suggestions?

Hello

I was looking for a javascript code to show an image in full size on moueover, I use this script on the site Code:

function ShowPicture(id,Source) { 
if (Source=="1"){ 
if (document.layers) document.layers[''+id+''].visibility = "show" 
else if (document.all) document.all[''+id+''].style.visibility = "visible" 
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" 
} 
else 
if (Source=="0"){ 
if (document.layers) document.layers[''+id+''].visibility = "hide" 
else if (document.all) document.all[''+id+''].style.visibility = "hidden" 
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" 
} 
}

CSS code i use:
Code:

<style type="text/css"> 
#Style { 
position:absolute; 
visibility:hidden; 
border:solid 1px #CCC; 
padding:5px; 

} 
</style>

On the site to to body I put this html code:
Code:

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>

When Im hovering over the link image is shown full size,

Problem: if you take a look: http://www.online-dovolenka.sk/dovolenka_korfu

if hover over both links "Click Here To Show Image" you will see same image, but I put two different images? where is the problem? any ideas?
Code:

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div> 
 
<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/pantokrator.jpg"></div>

what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings?
I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default..
can u suggest alternative logic and its code to implement the same??

I am not sure if this is a javascript problem or an html problem. I have posted the code below. The main two areas that I am interested in are 1) the area where the photo is shown in the larger size, and 2) the thumbnails below the larger picture. Right now in the img tag of the first image I have specified a height and width of 450px. The result is that when one hovers the mouse over the thumbnails, all pictures are shown at that size, regardless if they are larger or smaller than 450 x 450 pixels. I am not concerned about the larger images because I will use a script to scale those that someone on this forum was so kind enough to provide me with.

The IMPORTANT PART IS HE

I am concerned with smaller images. If you remove the height and width portion from the image tag, when you hover the mouse over a picture that's smaller than the others, such as the last one, which is smaller than all the others that are at 450 x 450, the thumbnails "move up". I would like the thumbnails to remain where they are at / for the top area where the photos are displayed to always be the same size, such as 450 x 450 px., and for the smaller pictures to be shown in the center in that area.

How can this be done?

Note: The entire portion of the stylesheet is not present. Let me know if something important is missing.

Code:

<html>
<head>  
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>MouseOver-Images</title>
  <style type="text/css">
td#kdwhdMAINPHOTO { width: 616px; vertical-align: top; }
table#kdwhdTHUMB { margin-top: 12px; }
td#kdwhdTHUMBNAILS { background-image:
url(http://www.sunandfuninoc.com/testingsites/gems4me/images/t_28.jpg);
width: 616px; height: 114px; text-align: center; }
td#kdwhdTHUMBNAILS img { border: 1px solid #696969; }
td#kdwhdTABLE { width: 296px; vertical-align: top; }
-->
  </style>
</head>
<body>
<table style="width: 924px;" border="0" cellpadding="0"
 cellspacing="0">
  <tbody>
    <tr>
      <td id="kdwhdMAINPHOTO"
 style="text-align: center; background-color: white;">
<!--Image 1--> <img
 src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
 name="swap" style="border: 0px solid rgb(105, 105, 105);"
 height="450" width="450">
      <table id="kdwhdTHUMB" border="0" cellpadding="0"
 cellspacing="0" width="616">
        <tbody>
          <tr>
            <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_26.jpg"
 alt="Click on the picture below to enlarge" height="25"
 width="616"></td>
          </tr>
          <tr>
            <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_27.jpg"
 alt="" height="10" width="616"></td>
          </tr>
          <tr>
            <td id="kdwhdTHUMBNAILS"><!--Image 1--><img
 src="http://site.gems4me.com/images/450by450.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
 height="80">&nbsp;
<!--Image 2--> <img
 src="http://site.gems4me.com/images/450by450-2.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
 height="80">&nbsp;
<!--Image 3--> <img
 src="http://site.gems4me.com/images/450by450.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
 height="80">&nbsp;
<!--Image 4--> <img
 src="http://site.gems4me.com/images/450by450-2.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
 height="80">&nbsp;
<!--Image 5--> <img
 src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/red2.jpg';"
 height="80"></td>
          </tr>
          <tr>
            <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_29.jpg"
 alt="" height="10" width="616"></td>
          </tr>
        </tbody>
      </table>
      </td>
      <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/spacer.gif"
 alt="" height="1" width="12"></td>
      <td id="kdwhdTABLE">
      <table border="0" cellpadding="5" cellspacing="0"
 width="296">
        <tbody>
          <tr>
            <td colspan="2" id="kdwhdTABLETITLE">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR1C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR1C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff
            </td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Dear Experts,

I am very new for javascript so I am not even sure it is possible or not.

The situation is like this,

I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button.

this is the sample layout:

<table>
<tr>
<td colspan=8>
Full size image will be shown in this cell
</td>
</tr>
<tr>
<td colspan=8>
Caption of the image will be displayed here
</td>
</tr>
<tr>
<td>Previous Button</td>
<td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td>
<td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td>
<td>Next Button</td>
</td>
</tr>

My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table.
As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails.

I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you.

Thanks in advance.

Charles

Hi,

I'm very new to coding Javascript, so have no idea what I'm doing, so sorry

What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code:

src="http://Mysite.com/Images/Button.png"

I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?:

Code:

onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890')

For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'?

And 2. For a timer to start for say 30 Seconds.

When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part'

I know that this is a lot to ask, and I will be so very grateful if someone helps me out here!

Thanks!
Harry.

Here's what I usually use and have been using for years and it works great, just not for this particular purpose. I don't have a clue when it comes to javascript.

Code:

<noscript><img src="no_script_quote.gif" width="406" height="94"/></noscript><script language="javascript">

var delay=6000
var curindex=0

var images=new Array()

	images[0]="quote1.gif"
	images[1]="quote2.gif"
	images[2]="quote3.gif"
	images[3]="quote4.gif"
	images[4]="quote5.gif"

var preload=new Array()

for (n=0;n<images.length;n++)
{
	preload[n]=new Image()
	preload[n].src=images[n]
}

document.write('<img name="defaultimage" src="'+images[Math.floor(Math.random()*(images.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(images.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

	document.images.defaultimage.src=images[curindex]
}

setInterval("rotateimage()",delay)
</script>

But, now I want to be able to set a default picture to be shown first and have the random pics appear next. I also don't want the default pic to show up again in the random array. So basically, every time the page was first visited, or refreshed it would show the default picture then move into the random pics.

Is there anyway to modify the code that I'm using to accomplish this? Or... Any help would be appreciated.

Thanks,
Dell

I found this code sample that when a user clicks somewhere on the image, then an "X" will appear. I would like to have the "X"s remain visible even when the user clicks on a different area of the image. As you can imagine, a user clicks clicks clicks then there are "X"s everywhere. How do I do this? Do I need to create more "div" tags with the mouse click locations?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mouse position</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script language="JavaScript" type="text/JavaScript">
var posx;
var posy;

function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{return false}//old browsers
}


function showP(){
document.getElementById("div2").style.visibility="visible";
document.getElementById("div2").style.top =(posy-10)+'px';
document.getElementById("div2").style.left=(posx-6)+'px';
}
</script>
<style type="text/css">
.div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5}
.div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;}
.div3 {position:absolute;visibility:hidden;z-index:10;font-family:monospace;font-size:20px;font-weight:900;color:black;}
</style>

</head>

<body onmousemove="getMouse(event)">
<div id="div1" class="div1">
<img src="./yourImage.jpg" onclick="showP()">
</div>
<div id="div2" class="div3">
X
</div>
</body>
</html>

I am asking a pretty simple question, but you got to start learning somewhere, you know! Anyway, I have implemented a script that resizes images into small thumbs on the left side of a page and shows the full size image on the right when the user click on a thumb. It works well. However, I have a possible 10 thumbs on theleft and my database that feeds this does not always have 10 images. Since I re-use the page for mutiple listings, I need to find a way to disable the broken image link for listings that don't have 10 thumbs. I have attached a picture of what it looks like.

Here is the script:

Code:

#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float:left; display: block; height:60px; width:60px; overflow:hidden; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { height:60px; width:auto; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
 
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
 
    </style> 
    <!--[if lt IE 8]>
    <style media="screen,projection" type="text/css">
        #jgal li { filter: alpha(opacity=50); }
        #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
    </style>
	<![endif]--> 
    <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> 
    <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> 
    <script type="text/javascript"> 
var gal = {
    init : function() {
        if (!document.getElementById || !document.createElement || !document.appendChild) return false;
        if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
        var li = document.getElementById('jgal').getElementsByTagName('li');
		enlargedImg = document.createElement('img');
		document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
		enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
        li[0].className = 'active';
        for (i=0; i<li.length; i++) {
			li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
            li[i].style.backgroundRepeat = 'no-repeat';
            li[i].title = li[i].getElementsByTagName('img')[0].alt;
            gal.addEvent(li[i],'click',function() {
                var im = document.getElementById('jgal').getElementsByTagName('li');
                for (j=0; j<im.length; j++) {
                    im[j].className = '';
                }
                this.className = 'active';
				enlargedImg.src = this.getElementsByTagName('img')[0].src;
            });
        }
    },
    addEvent : function(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent("on"+type, obj[type+fn]);
        }
    }
}
 
gal.addEvent(window,'load', function() {
    gal.init();
});

And then my list basically looks like this:

Code:

            <ul id="gallery">
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb5']; ?>" alt="<?php echo $row_WADAitems['ItemDesc5']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb6']; ?>" alt="<?php echo $row_WADAitems['ItemDesc6']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb7']; ?>" alt="<?php echo $row_WADAitems['ItemDesc7']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb8']; ?>" alt="<?php echo $row_WADAitems['ItemDesc8']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb9']; ?>" alt="<?php echo $row_WADAitems['ItemDesc9']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb10']; ?>" alt="<?php echo $row_WADAitems['ItemDesc10']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb11']; ?>" alt="<?php echo $row_WADAitems['ItemDesc11']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb12']; ?>" alt="<?php echo $row_WADAitems['ItemDesc12']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb13']; ?>" alt="<?php echo $row_WADAitems['ItemDesc13']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb14']; ?>" alt="<?php echo $row_WADAitems['ItemDesc14']; ?>"></li> 
  </ul>

So as you can see, if I don't have an image in the database that it pulls from, I get that icon for a broken image link. How can I remove that icon so it doesn't show the no image icon? Many thanks!

Hello all,


Essentially what I am trying to get without much success on the issue is this:

I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window.

This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason.

I am obliged for any help on this.

*edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though.

Let me start of by saying that I'm a designer, not a programmer so I'll apologize in advance for having very little knowledge of javascript.

I found a free script for a auto-advancing slideshow that allows you to give each image in the slideshow a unique link. My problem is that when you click on one of the pictures the link opens in a new window instead of loading in the default browser window. I have tried to search google for an answer but my lack of javascript knowledge has left me scratching my chin.

Here's the code in the head of my page:

Code:

<script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow
*/

var slideimages=new Array()
var slidelinks=new Array()

function slideshowimages(){
  for (i=0;i<slideshowimages.arguments.length;i++){
  slideimages[i]=new Image()
  slideimages[i].src=slideshowimages.arguments[i]
  }
}

function slideshowlinks(){
  for (i=0;i<slideshowlinks.arguments.length;i++)
  slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
  if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
  else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
}
//-->
</script>

and here's the Body code:

Code:

<script>
		<!--
		//configure the paths of the images, plus corresponding target links
		slideshowimages("images/services/3d_meter.jpg", "images/services/3d_prototype.jpg", "images/services/3d_stage_renderings.jpg", "images/services/atsite.jpg", "images/services/netstar.jpg", "images/services/photo_manipulation.jpg", "images/services/powerpoint.jpg")
		slideshowlinks("/", "/", "/", "/", "/", "/", "/")

		//configure the speed of the slideshow, in miliseconds
		var slideshowspeed=8000
		var whichlink=0
		var whichimage=0

		function slideit(){
  		if (!document.images)
    		return
    		document.images.slide.src=slideimages[whichimage].src
    		whichlink=whichimage

  		if (whichimage<slideimages.length-1)
    		whichimage++
  		else
    		whichimage=0
    		setTimeout("slideit()",slideshowspeed)
		}
		slideit()
		//-->
		</script>

fooling around with it, I think I have determined that my problem is the window.open in the function gotoshow, but again, I'm a designer who has little knowledge of how this actually works.

If it helps, here is a link to my site where I have the slideshow, http://gravescreativedesign.com/services.html All of the images link to the index page for my site at the moment for testing purposes, but these images will eventually link to different urls within my portfolio section of my website.

my javascript clock suddenly disappeared. I don't know what happened. It's an external file. I have<script language="javascript" src="main.js"></script>
in the head section of my html and the .js looks like this but it's not showing up. I haven't made any changes unless I'm just remembering wrong

function startTime()
{
var now = new Date();
var h=now.getHours();
var min=now.getMinutes();
var s=now.getSeconds();
var ampm=(now.getHours()>11)?"PM":"AM";
var d=now.getDay()
var y=now.getFullYear()
var mon=now.getMonth()
var dm=now.getDate()

if (h>12) h-=12;
if (h==0) h=12;
if (min<10) min="0"+m;
if (s<10) s="0"+s;
if (dm<10) dm="0"+dm;

if (d==0) d="Sun";
if (d==1) d="Mon";
if (d==2) d="Tues";
if (d==3) d="Wed";
if (d==4) d="Thurs";
if (d==5) d="Fri";
if (d==6) d="Sat";

mon+=1;

document.getElementById("time").innerHTML=h+":"+min+":"+s+""+ampm+" "+d+" "+mon+" "+dm+" "+y;

t=setTimeout('startTime()',1000);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}

Hello all, I have this code where you click on a state and it gives you haunted places for that state. Here's my HTML code:

Code:

<img src="media/us_map.gif" border="0" usemap="#map" style="border:1px solid #999999;padding:5px;background-color:white;"/>
<map name="map" id="map">
	<area onclick="me();" title="Maine"shape="poly" coords="532,77,522,52,525,51,527,47,526,38,525,29,528,18,532,20,536,15,541,18,546,34,560,45"Maine" />
	<area onclick="nh();" title="New Hampshire" shape="poly" coords="517,83,517,64,523,56,532,81,519,86"New_Hampshire" />
	<area onclick="vt();" title="Vermont" shape="poly" coords="502,58,505,78,508,84,511,92,519,88,516,66,520,55"Vermont" />
  	<area onclick="ma();" title="Massachusetts" shape="poly" coords="543,91,546,94,538,98,533,94,532,92,512,100,512,93,533,81,518,86,531,85,538,87"Massachusetts" />
  	<area onclick="ri();" title="Rhode Island" shape="poly" coords="528,95,531,104,536,98,531,94"Rhode_Island" />
  	<area onclick="ct();" title="Connecticut" shape="poly" coords="513,101,515,111,529,104,528,96,524,97"Connecticut" />
	<area onclick="ny();" title="New York" shape="poly" coords="529,110,519,118,510,119,494,104,453,114,449,109,455,104,453,97,458,94,471,92,479,85,472,78,480,75,481,67,498,61,490,62,501,61,504,78,511,92,510,100,514,110,514,114,511,112"New_York" />
 	<area onclick="nj();" title="New Jersey" shape="poly" coords="501,134,507,140,512,125,509,123,511,114,502,109,500,112,497,121,505,127,506,125,500,132"New_Jersey" />
 	<area onclick="de();" title="Delaware" shape="poly" coords="495,136,500,152,507,148,498,134"Delaware" />
  	<area onclick="md();" title="Maryland" shape="poly" coords="502,167,506,156,507,149,501,153,492,137,460,142,460,148,465,147,473,144,479,146,483,147"Maryland" />
  	<area onclick="pa();" title="Pennsylvania" shape="poly" coords="463,150,458,119,464,114,468,119,509,110,515,115,512,126,518,132,512,140"Pennsylvania" />
  	<area onclick="wv();" title="West Virginia" shape="poly" coords="436,176,429,167,432,159,447,145,458,145,447,149,459,145,461,150,470,147,464,160,457,162,452,178"West_Virginia" />
  	<area onclick="va();" title="Virginia" shape="poly" coords="427,190,437,178,450,180,458,163,465,162,471,146,485,150,495,163,502,176"Virginia" />
  	<area onclick="nc();" title="North Carolina" shape="poly" coords="418,216,431,214,439,207,450,206,455,208,468,209,484,221,487,217,497,205,501,204,511,193,505,176,446,185,441,198,432,197,420,212"North_Carolina" />
  	<area onclick="sc();" title="South Carolina" shape="poly" coords="430,215,436,220,445,230,457,238,459,250,485,221,470,210,449,205,438,208"South_Carolina" />
  	<area onclick="ga();" title="Georgia" shape="poly" coords="415,275,415,251,405,216,429,215,445,231,455,238,459,251,456,267,451,272,450,276,445,272"Georgia" />
  	<area onclick="fl();" title="Flordia" shape="poly" coords="387,275,386,283,398,282,409,284,416,290,429,282,439,289,445,292,445,311,456,326,462,335,470,341,463,351,471,349,479,339,481,325,476,310,470,298,462,284,458,270,452,275,445,272,418,277,413,271"Florida" />
  	<area onclick="al();" title="Alabama" shape="poly" coords="377,284,374,221,403,218,412,247,413,272,389,272,384,282"Alabama" />
  	<area onclick="ms();" title="Mississippi" shape="poly" coords="341,277,348,260,345,251,346,234,354,221,373,220,376,285,365,288,362,278"Mississippi" />
  	<area onclick="la();" title="Lousiana" shape="poly" coords="313,297,319,278,312,266,311,246,316,250,342,250,347,259,342,278,361,279,364,289,363,297,368,302,358,303,348,305,341,294,330,302"Louisiana" />
  	<area onclick="tn();" title="Tennasee" shape="poly" coords="356,220,361,200,372,199,445,187,442,198,432,196,419,216"Tennasee" />
 	<area onclick="ky();" title="Kentucky" shape="poly" coords="363,198,365,191,370,191,371,182,386,178,405,160,415,165,427,164,436,178,424,189"Kentucky" />
  	<area onclick="oh();" title="Ohio" shape="poly" coords="407,160,400,124,413,121,423,125,431,123,439,116,447,143,431,159,430,163,415,162,421,163"Ohio" />
  	<area onclick="mi();" title="Michigan" shape="poly" coords="381,124,387,112,381,101,381,89,395,68,400,73,405,76,410,86,405,95,406,103,414,91,419,101,420,111,412,122"Michigan" />
  	<area onclick="mi();" title="Michigan" shape="poly" coords="341,62,353,70,366,74,367,85,371,70,381,70,390,64,399,66,400,54,360,46"Michigan" />
  	<area onclick="ind();" title="Indiana" shape="poly" coords="375,180,375,129,384,125,400,124,408,160,388,177"Indiana" />
  	<area onclick="il();" title="Illinois" shape="poly" coords="364,192,356,184,348,177,350,170,344,169,334,154,338,150,339,138,347,127,344,124,340,120,368,116,373,130,375,180,368,180,369,189"Illinois" />
  	<area onclick="wi();" title="Wisconsin" shape="poly" coords="339,121,335,106,319,91,316,78,324,73,322,65,336,59,364,77,365,90,373,80,367,113,368,116"Wisconsin" />
  	<area onclick="mn();" title="Minnesota" shape="poly" coords="286,108,286,86,280,80,283,74,280,33,298,33,323,45,343,43,322,66,324,73,316,80,318,90,337,107"Minnesota" />
  	<area onclick="ia();" title="Iowa" shape="poly" coords="285,108,284,123,292,148,337,148,338,138,346,127,341,120,335,107"Iowa" />
  	<area onclick="mo();" title="Missouri" shape="poly" coords="293,150,301,157,299,163,309,171,305,198,354,200,352,207,360,206,365,194,347,177,349,171,344,169,334,154,339,148"Missouri" />
  	<area onclick="ar();" title="Arkansas" shape="poly" coords="309,243,307,199,352,203,348,208,358,207,356,220,346,234,344,247,314,248,341,248,318,251"Arkansas" />
  	<area onclick="nd();" title="North Dakota" shape="poly" coords="215,73,219,31,278,32,281,76"North_Dakota" />
  	<area onclick="sd();" title="South Dakota" shape="poly" coords="209,112,216,74,279,77,285,85,282,121,276,115,270,117,264,114"South_Dakota" />
  	<area onclick="ne();" title="Nebraska" shape="poly" coords="209,136,210,113,264,114,267,116,275,117,282,122,292,152,294,154,229,152,226,142,228,139"Nebraska" />
  	<area onclick="ks();" title="Kansas" shape="poly" coords="227,192,227,152,294,155,301,159,294,163,309,172,304,197"Kansas" />
  	<area onclick="ok();" title="Oklahoma" shape="poly" coords="213,199,214,192,306,199,309,244,291,241,271,243,256,235,246,233,247,202"Oklahoma" />
  	<area onclick="tx();" title="Texas" shape="poly" coords="168,258,170,270,184,280,188,296,201,303,212,294,224,294,242,318,253,338,274,348,273,324,312,299,317,278,310,268,311,245,290,242,276,245,255,237,245,233,246,203,213,200,209,259"Texas" />
  	<area onclick="mt();" title="Montana" shape="poly" coords="115,16,110,30,120,50,115,61,123,61,129,82,148,79,211,86,218,30"Montana" />
  	<area onclick="wy();" title="Wyoming" shape="poly" coords="137,127,145,79,213,87,209,105,209,138"Wyoming" />
  	<area onclick="co();" title="Colorado" shape="poly" coords="153,184,161,132,227,140,228,149,226,191"Colorado" />
  	<area onclick="nm();" title="New Mexico" shape="poly" coords="140,261,153,182,213,190,208,257,151,253,149,263"New_Mexico" />
  	<area onclick="idaho();" title="Idaho" shape="poly" coords="79,105,90,74,86,73,99,61,95,49,106,13,114,16,109,27,119,49,115,60,122,64,128,82,145,81,136,114"Idaho" />
  	<area onclick="ut();" title="Utah" shape="poly" coords="98,175,111,112,135,113,135,125,160,130,153,184"Utah" />
  	<area onclick="az();" title="Arizona" shape="poly" coords="80,236,117,255,135,263,152,186,99,174,92,192,89,191,89,214"Arizona" />
  	<area onclick="wa();" title="Washington" shape="poly" coords="34,34,41,37,44,47,95,51,105,12,60,1,57,14,51,20,49,11,38,6"Washington" />
  	<area onclick="or();" title="Oregon" shape="poly" coords="79,102,11,85,34,34,42,37,42,49,94,52,98,62,85,72,89,77"Oregon" />
  	<area onclick="nv();" title="Nevada" shape="poly" coords="53,98,42,134,87,199,89,190,93,191,97,174,110,112"Nevada" />
 	<area onclick="ca();" title="California" shape="poly" coords="78,234,51,233,41,209,30,198,21,197,21,185,13,166,14,158,7,150,6,108,12,88,53,97,42,135,87,200,85,216"California" />
  	<area onclick="ak();" title="Alaska" shape="poly" coords="0,370,133,345,101,312,84,315,69,256,26,252,6,252,0,252"Alaska" />
  	<area onclick="hi();" title="Hawaii" hape="poly" coords="139,322,159,355,193,364,221,362,197,331,158,320"Hawaii" />
  	<area onclick="dc();" title="Washington DC" shape="rect" coords="514,182,535,196"Washington DC" />
  	<area onclick="md();" title="Maryland" shape="rect" coords="517,160,540,174"Maryland" />
  	<area onclick="de();" title="Delaware" shape="rect" coords="531,141,550,156"Delaware" />
  	<area onclick="nj();" title="New Jersey" shape="rect" coords="519,125,538,138"New_Jersey" />
  	<area onclick="ct();" title="Connecticut" shape="rect" coords="532,113,549,125"Connecticut" />
  	<area onclick="ri();" title="Rhode Island" shape="rect" coords="558,94,571,108"Rhode_Island" />
  	<area onclick="ma();" title="Massachusetts" shape="rect" coords="549,72,568,86"Massachusetts" />
  	<area onclick="nh();" title="New Hampshire" shape="rect" coords="502,29,522,42"New_Hampshire" />
  	<area onclick="vt();" title="Vermont" shape="rect" coords="476,29,496,44"Vermont" />
</map>

</td>
<td valign="top">

<div style="text-align:left; width:412px; height:362px; border:1px solid #999999;padding:10px;background-color:white; overflow:auto;margin-left:5px;" id="states"><span>Click a state to the right to see where that state's haunted places are.</span></div></td>

So what happens is you click on a state and it will show what's under that states line inside this JS file:

http://www.pxlcreations.com/paraguide/map.js

That works fine but if I try and put lots of text inside it, it won't work. I have to put each state inside this and here's what alabama looks like:

http://www.pxlcreations.com/paraguide/alabama.html

So here's a quick recap. If I try and put the Albany data into the JS file, it won't show. I even tried this:

Code:

<!--#include virtual='alabama.html'-->

But that didn't work either. Thanks in advance!