JavaScript - Turn An Image In Javescript !

if it fails (does not find the string)? I thought it gave out the value 'null' or some such, but apparently not.

Basically I want a function to execute, but only if replace will work. I need to do this as concisely as possible... Is there a simple way to do this?

Otherwise is there an 'include' function or something I could use to check for a string in a value and make it's existence the premise on which an if statement works?

Thanks in advance, sorry if this was incoherent... late nights and all.

Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work.

My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off.

I have my checkbox created as well as all the effects working for it.

Here is a piece of the main code as well as a link to the ambilight.js file
Code:

            <label name="ambilightToggle">
			<input type="checkbox" name="toggle"/>
			<div class="toggle-switch">
				<div class="handle"></div>
				<div class="track">
					<span>OFF</span><span>ON</span>
				</div>
			</div>
			</label>
        
    	</div>
	</div>
    
    
	<div id="main" class="clearfix">
    
        <div id="video-edge">
                <img id="ribbon" width="112" height="112" alt="Demo Reel Ribbon" src="img/ribbon-demoreel.png">
                <div id="video-wrap" class="video-js-box moo-css">
                    <video id="example" class="video-js" width="720" height="405" controls preload poster="posters/poster_demoreel2010.png">
                      <source src="video/demoreel2010.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
                      <source src="video/demereel2010.webm" type='video/webm; codecs="vp8, vorbis"' />
                      <source src="video/demoreel2010.ogv" type='video/ogg; codecs="theora, vorbis"' />
                    </video>
                </div>
         </div>
         
         		<script type="text/javascript">
                    ambiLight.create(document.getElementById('example'))
                </script>

Portfolio Page

http://www.eschulist.com/test/js/ambilight.js



I was able to make the ambilight effect go away using this, but it only works for a second as the video continues to play and the new lights are redrawn.
Code:

<script type="text/javascript">
   $(document).ready(function(){
   $(this).click(function(){
       $('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway');
   });
   });
</script>

Any other ideas on what to do? If the click function works I should be able to have it check the checkboxes state and have it persist. Maybe?

Here is my website... www.thepriceoflust.com You need to log into my website as a user... User Name is: supramaniac Password is: lakeella On the top bar you can click on the chat tab... Enter into one of the chat rooms... As you will see the chat room window turns into like its own web browser and displays a copy of my index page... The chat rooms used to do that before and someone fixed it and said that my permissions were wrong on my installation folder. I don't know if that is right or not. Why would it go back to doing the same thing. Anyway does anybody know how to fix this issue?

I am using the below script on http://bubbles4urtroubles.com. Because I made the bubbles larger than the ones used in the original script, the horizontal scroll bar displays some of the time, then turns off. Is there any way to just not have the horizontal scroll bar?

Also, how would I set the zindex so the bubbles are always in front of everything else.

Thank you in advance.

//Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com)
//Based on code by Altan d.o.o. (snow@altan.hr)
//For full source code and installation instructions to this script, visit http://www.dynamicdrive.com

var no = 15; // image number or falling rate
var speed = 2; // the lower the number the faster the image moves
var snow = new Array();
snow[0] = "bubble.png"
snow[1] = "bubble2.png"
snow[2] = "bubble3.png"

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 600, doc_height = 1024;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}

function snowIE_NS6() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset+'px';
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+'px';
}
}
setTimeout("snowIE_NS6()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// End -->
</script>

Hello all,

Firstly apologies for my javascript ignorance - I'm not a programmer, just someone thrust into programming since there's no-one else at my company who can do it.

I found a nice js script online for a drop-down menu where the drop downs both expand to their full size and fade-in (very quickly) from transparent.

The script in action can be seen on the script writer's site he http://sandbox.leigeber.com/dropdown-menu/index.html

and the script is:
Code:

var menu=function(){
	var t=15,z=50,s=6,a;
	function dd(n){this.n=n; this.h=[]; this.c=[]}
	dd.prototype.init=function(p,c){
		a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
		for(i;i<l;i++){
			var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
			h.onmouseover=new Function(this.n+'.st('+i+',true)');
			h.onmouseout=new Function(this.n+'.st('+i+')');
		}
	}
	dd.prototype.st=function(x,f){
		var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
		clearInterval(c.t); c.style.overflow='hidden';
		if(f){
			p.className+=' '+a;
			if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
			if(c.mh==c.offsetHeight){c.style.overflow='visible'}
			else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
		}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
	}
	function sl(c,f){
		var h=c.offsetHeight;
		if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
			if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
			clearInterval(c.t); return
		}
		var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
		c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
		c.style.height=h+(d*f)+'px'
	}
	return{dd:dd}
}();

with Code:

var menu=new menu.dd("menu");
menu.init("menu","menuhover");

used on my html page to call the script.


I'm using the script exactly as written and exactly as it is on the dude's demo page for it. However, some of my sub-menu items are wider than their parent items and in IE7 this means they are bound to the width of the parent until the animations have finished, and then pop-out to their full width (NB not an issue in FF3).

I'm actually not too fussed about either the fade in or expand out effects (they'd be nice, but not at the expense of the IE7 bug) so I simply wanted to know what I should do to the script to turn off the effects, or make them instant - ie reduce the length of the effect to as short as possible.

I understand I can get rid of the bug by specifying a width for the ul element in my css, but I'd rather not do that if I can help it.

I'd appreciate anyone's insight on this.

Thanks
Tom

I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it...

I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded

Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same....

My live demo is here!


Thank you for any help and/or advice in advance,
Best Regards,
Tim

i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch.

can any one guide me i am new to programming

Thanks in advance!!!

I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you.

Javascript
Code:

   <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>

HTML THUMBNAIL
Code:

<div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div>

HTML LARGER IMAGE
Code:

<div><img src="" id="BigOne"></div>

Hello,

I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document).

Links:

http://www.courtneyhunt.com.au/press_bg.html
http://www.courtneyhunt.com.au/press_gallery.html

I am a complete novice with JavaScript so if anyone could help that would be great.

Thank you in advance.

QUESTION 1:

Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction.

Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings.

I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image.

So, let's say this is the URL: www.adomainname.com/image.jpg

and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k.

So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px.

For an image that's 300 px x 500 px, it should remain as such.

For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px.

I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited.

Note: The part that I am most interested in is in being able to detect the size / dimensions of the image.

QUESTION 2:

On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.)

Hi,

So here is my problem. I have a main image that has a bunch of images (e.g., stars) on top. I place the stars in absolute positions on top of the main image. If a user resizes the brower, then the position of the main image changes, so then the stars are off position (not on top of the main image).

Should I:
1) make the main image be in an absolute position?
or
2) do something else such that the main image moves around if the browser is resized? but then I don't know how to re-adjust the positions of the stars on the fly.

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

Hello,

My site has an image gallery with a row of pictures at the bottom. When I load up the page it should show image 1 in the main gallery window, but instead it's showing image in position #10 (the one to the left of #1). You can see what I'm talking about here.

When you load the page it's showing the White House, but it should be showing the Green House (position #1 in slider). The White House can't be seen in the slider since it's in position #10, but shows up first int the main window. Is this a javascript issue or what? All JS files can be found here

Can anybody help me debug this?? I'm going nuts

Thank you

Hi,

I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website?

Thanks!

I came across your forums here and it looked like a great place to get some help, and help is exactly what I need!

I have been struggling with this javascript that changes an image and its corresponding useMap.

For reference:
- All images are the same size and located in the same directory, except the main map image
- All images are preloaded (I did this just in case it was an image problem)
- The page works fine in Firefox, and fine in IE until it crashes
- http://www.forthecode.com/imagemap/untitled.htm

The Problem:
- When clicking on a state in the main image, the state image appears, if you then click on the "return to the overview" it returns to the overview image then promptly crashes IE within 1-2 seconds.
- This even happens in a completely blank page (no other content)

Exceptions:
- Clicking on the state Mississippi does not cause this problem (you can go back and forth with Mississippi without problem)
- Tennessee, Ohio, Arkansas, Illonois crash as soon as their state map comes up!

The Javascript function itself:
Code:

<script language="Javascript">
	function changemap(vari){
		var vari;
		var stoptime;
		if(vari=="regionview"){
			document.regionmap.src = "/images/branchmap2.jpg";
			stoptime = setTimeout( function changemap1(){ document.regionmap.useMap="#Map"; clearTimeout(stoptime);} , 300);
			}
		else{
			document.regionmap.src = "/images/states/" + vari + ".jpg";
			stoptime = setTimeout( function changemap2(){ document.regionmap.useMap="#"+vari; clearTimeout(stoptime);} , 300);
			}
	}
</script>

The image tag and image maps:
Code:

<img src="images/branchmap2.jpg" name="regionmap" usemap="#Map" border="0"> 
<map name="Map">
  <area shape="rect" coords="144,14,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana"> 
  <area shape="poly" coords="139,91,137,104,132,108,132,115,128,118,160,110,167,109,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
  <area shape="poly" coords="230,138,123,139,121,131,127,122,140,117,153,115,170,107,191,90,194,85,202,87,213,90,221,91,225,90,232,92,232,100,238,107,242,114,245,119" href="#" onClick="javascript: changemap('kentucky');" alt="Kentucky" title="Kentucky">
  <area shape="poly" coords="153,177,143,244,144,280,127,287,115,286,113,272,83,271,78,264,86,249,93,239,89,228,88,212,90,202,97,192,105,178" href="#" onMouseUp="javascript: changemap('mississippi');"  alt="Mississippi" title="Mississippi">
  <area shape="poly" coords="87,226,17,227,16,212,7,212,3,128,108,130,107,142,113,142,120,128,121,131,121,141" href="#" onClick="javascript: changemap('arkansas');"  alt="Arkansas" title="Arkansas">
  <area shape="poly" coords="246,118,255,98,272,87,284,64,283,11,265,17,258,25,241,31,217,18,187,18,190,81,218,90,224,87,232,92,235,100" href="#" onClick="javascript: changemap('ohio');"   alt="Ohio" title="Ohio">
  <area shape="poly" coords="124,116,128,121,120,128,111,140,109,129,23,127,21,70,15,60,2,33,74,33,79,39,78,51,95,76,103,77,100,87,101,95,108,103,113,111,114,118" href="#" onClick="javascript: changemap('missouri');"   alt="Missouri" title="Missouri">
  <area shape="poly" coords="129,117,131,109,136,104,138,91,144,80,142,19,137,4,99,3,102,14,94,22,87,22,90,34,81,45,78,50,94,75,105,77,103,88,104,97,112,107,116,114" href="#" onClick="javascript: changemap('illonois');"   alt="Illonois" title="Illonois">
  <area shape="poly" coords="204,177,109,176,123,139,249,139" href="#" onMouseUp="javascript: changemap('tennessee');"   alt="Tennessee" title="Tennessee">
  </map>
<map name="arkansas"> 
  <area shape="rect" coords="240,135,284,163" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
  <area shape="circle" coords="209,143,7" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
  <area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="mississippi"> 
    <area shape="rect" coords="20,177,64,191" href="/branches/jackson.php" alt="Jackson" title="Jackson">
    <area shape="circle" coords="103,183,8" href="/branches/jackson.php" alt="Jackson" title="Jackson">
    <area shape="rect" coords="217,198,277,214" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
    <area shape="circle" coords="175,208,7" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
    <area shape="rect" coords="222,96,279,111" href="/branches/columbus.php" alt="Columbus" title="Columbus">
    <area shape="circle" coords="195,106,8" href="/branches/columbus.php" alt="Columbus" title="Columbus">
    <area shape="rect" coords="222,71,261,85" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
    <area shape="circle" coords="174,84,6" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="missouri"> 
    <area shape="rect" coords="195,262,243,275" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
    <area shape="circle" coords="216,199,7" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
    <area shape="rect" coords="247,173,280,186" href="/branches/ozora.php" alt="Ozora" title="Ozora">
    <area shape="circle" coords="206,182,6" href="/branches/ozora.php" alt="Ozora" title="Ozora">
    <area shape="rect" coords="232,158,278,169" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
    <area shape="circle" coords="194,165,7" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
    <area shape="rect" coords="228,128,275,142" href="/branches/stlouis.php" alt="St. Louis" title="St. Louis">
    <area shape="circle" coords="206,137,8" href="/branches/stlouis.php" alt="St Louis" title="St Louis">
    <area shape="rect" coords="198,97,258,112" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
    <area shape="circle" coords="182,130,6" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="kentucky"> 
    <area shape="rect" coords="24,218,72,231" href="/branches/paducah.php" alt="Paducah" title="Paducah">
    <area shape="circle" coords="46,190,6" href="/branches/paducah.php" alt="Paducah" title="Paducah">
    <area shape="rect" coords="35,127,95,141" href="/branches/henderson.php" alt="Henderson" title="Henderson">
    <area shape="circle" coords="63,174,7" href="/branches/henderson.php" alt="Henderson" title="Henderson">
    <area shape="rect" coords="94,218,175,232" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
    <area shape="circle" coords="127,188,6" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
    <area shape="rect" coords="108,75,159,90" href="/branches/louisville.php" alt="Louisville" title="Louisville">
    <area shape="circle" coords="144,130,7" href="/branches/louisville.php" alt="Louisville" title="Louisville">
    <area shape="rect" coords="179,75,232,89" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
    <area shape="circle" coords="193,127,8" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="indiana"> 
    <area shape="rect" coords="18,199,73,213" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
    <area shape="circle" coords="110,204,6" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
    <area shape="rect" coords="210,180,273,193" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
    <area shape="circle" coords="187,186,6" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
    <area shape="rect" coords="211,117,276,132" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
    <area shape="circle" coords="159,124,5" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
    <area shape="rect" coords="211,101,250,113" href="/branches/muncie.php" alt="Muncie" title="Muncie">
    <area shape="circle" coords="178,116,7" href="/branches/muncie.php" alt="Muncie" title="Muncie">
    <area shape="rect" coords="212,46,257,60" href="/branches/fremont.php" alt="Fremont" title="Fremont">
    <area shape="circle" coords="185,55,7" href="/branches/fremont.php" alt="Fremont" title="Fremont">
    <area shape="rect" coords="36,73,92,86" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
    <area shape="circle" coords="179,79,5" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
    <area shape="rect" coords="36,109,87,121" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
    <area shape="circle" coords="138,113,6" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="illonois"> 
    <area shape="rect" coords="28,184,89,197" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
    <area shape="circle" coords="126,192,6" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
    <area shape="circle" coords="148,153,5" href="/branches/effingham.php" alt="Effingham" title="Effingham">
    <area shape="rect" coords="218,146,273,159" href="/branches/effingham.php" alt="Effingham" title="Effingham">
    <area shape="rect" coords="219,120,260,134" href="/branches/urbana.php" alt="Urbana" title="Urbana">
    <area shape="circle" coords="164,130,6" href="/branches/urbana.php" alt="Urbana" title="Urbana">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="tennessee"> 
    <area shape="rect" coords="0,199,49,213" href="/branches/memphis.php" alt="Memphis" title="Memphis">
    <area shape="circle" coords="25,170,7" href="/branches/memphis.php" alt="Memphis" title="Memphis">
    <area shape="rect" coords="41,80,90,94" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
    <area shape="circle" coords="64,149,8" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="ohio"> 
    <area shape="rect" coords="49,221,105,237" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
    <area shape="circle" coords="74,162,7" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
    <area shape="rect" coords="6,138,46,151" href="/branches/dayton.php" alt="Dayton" title="Dayton">
    <area shape="circle" coords="91,146,6" href="/branches/dayton.php" alt="Dayton" title="Dayton">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>

This is exactly how it is in my html files. I really appreciate any input, suggestions or comments you can give me.

Thanks in advance!