JavaScript - Image Swap Script Doesn't Work

I find the following detect Internet connection script unreliable. Can someone tell me what I should change to make it work consistently?

To sum up, the code detects an image on a server and checks its size. If it's size is less than zero, then "Off" appears in a form input field. Otherwise, "On" appears in the field. This code is being used in a smartphone to test for Internet connection.


Code:

		<form id="formConnection"> 
			<input id="connectionStatus" class="display2" size="1" type="text" name="status" value="">
		</form>

<!-- testConnectionInApp.png is a 126-byte 10x10px PNG image. -->

<script type="text/javascript">
function showOn(form) {
     form.elements.status.value = "On";
     }

function showOff(form) {
    form.elements.status.value = "Off";
    }

function testConnection() {
    var checkExistenceOfImg = new Image();
    var form = document.getElementById('formConnection');
    checkExistenceOfImg.src =
               "http://aedownloads.com/misc/testConnectionInApp.png"; 
    if(checkExistenceOfImg.height > 0)  {
		showOn(form);
    }
    else {
		showOff(form);
    }
}
</script>
</body>
</html>

Hi,

I'm been struggling with this for a week now, I'm new to javascript so please bear with me.

What I have been trying to do is get the div to swap once you go over a <td>, at the moment the when you point on one of the <td> it takes the div away. I have a feeling it's got to do with this piece of code:

Code:

if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {

                arr[i].style.display = 'none';

Here is the complete code:

Code:

<script language="javascript">

function showDiv(elem)

{
        var arr = document.getElementsByTagName('div')

        for(var i=0; i<arr.length;i++)

        {

            if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {

                arr[i].style.display = 'none';

                var styler = document.getElementById("style1_"+arr[i].id);

                styler.className = "stylegray";

                var styler = document.getElementById("style2_"+arr[i].id);

                styler.className = "stylegray";

            }

        }

        var arr = document.getElementsByTagName('img')

        for(var i=0; i<arr.length;i++)

        {

            if (arr[i].id.substr(0,5) == "arrow") {

                arr[i].src = 'images/blank.jpg';
            }
        }

        var arr = document.getElementsByTagName('a')

        for(var i=0; i<arr.length;i++)

        {

            if (arr[i].id.substr(0,7) == "style3_") {

                var styler = document.getElementById(arr[i].id);

                styler.style.color = "#e3e3e3";
            }
        }

        e2 = document.getElementById(elem);

        e2.style.display = 'block';

        e3 = document.getElementById("style1_"+elem);

        e3.className = "stylered";

        e3 = document.getElementById("style2_"+elem);

        e3.className = "stylegray2";

        e3 = document.getElementById("style3_"+elem);

        e3.style.color = "darkred";

        e3 = document.getElementById("arrow_"+elem);

        e3.src = "images/arrow.png";

}

</script>

<td align="left" style="<?=$bstyle?> padding-left: 10px; padding-right: 10px;" width="<?=$sizer?>%" onmouseover="javascript:showDiv('<?=$value["showDiv"]?>');"  valign="top">

I would really appreciate it if someone can just point me into the right direction.

Thanks

Hi

I am a complete novice with Javascript.

I posted a question on another site as I want to show a series of 9 images in a random order - ie all 9 images but changing their order every time the page loaded.

Someone responded with the following script:

onload= function(){
var n, pic,
A= [1, 2, 3, 4, 5, 6, 7, 8, 9];// replace integers with urls
var pa= document.getElementById('image_set'); // reference the container element
pa=mr('evalBlock')
while(A.length){
pic=document.createElement('img');
n= Math.floor(Math.random()*A.length);
pic.src= A.splice(n, 1);
pa.appendChild(pic);
}
}

However - I don't know how to put it into my pages to get it to work and they have not replied to my further query.

I think I have to put something in the () after function, also, do the URLs have to be absolute and do they need enclosing in ' or ".
Also what code do I then have to put on the page to call the image?

Would anyone here be able to help?

Many thanks
Carol

Hello. I have a script that detects the image size of a url and then shows a resized version of the image if it's necessary to resize. (this script was provided to me by the user bullant, thank you.) (Script will be shown later further down)

In order to display the resized image, I must specify the id tag of myImg(and a number) in the img tag and must have an equal number of urls in the script as I do img tags.

So, if I have three images I need to do the following to get them to appear.

Code:

<div><img id="myImg0" src='' alt="" /></div>
        <div><img id="myImg1" src='' alt="" /></div>
        <div><img id="myImg2" src='' alt="" /></div>

And this is the script (it can go right below the above code and all in the body tag):

Code:

<script type="text/javascript">
            var picUrl = [
                'http://localhost/test/pic1.jpg',
                'http://localhost/test/pic2.jpg',
                'http://localhost/test/pic3.jpg',
            ];
            //create image objects
            oPic = new Array();
            for(i=0; i < picUrl.length; i++){
                oPic[i] = new Image();
                oPic[i].src = picUrl[i];
            }
            window.onload=function(){
                var maxWidth = 200;
                var maxHeight = 200;
                for(i=0; i < oPic.length; i++){
                    var width = oPic[i].width; //original image width
                    var height = oPic[i].height;  //original image height
                    //set the image size to display on the page
                    var newDims = calcNewDimensions(width, height, maxWidth, maxHeight);
                    document.getElementById('myImg'+i).width = newDims['width'];
                    document.getElementById('myImg'+i).height = newDims['height'];
                    document.getElementById('myImg'+i).src = oPic[i].src;
                }
            }
            function calcNewDimensions(width, height, maxWidth, maxHeight){
                newDims = new Array();
                //scaling factors
                var xRatio = maxWidth / width;
                var yRatio = maxHeight / height;
                //calculate the new width and height
                if(width <= maxWidth && height <= maxHeight)  { //image does not need resizing
                    newDims["width"]  = width;
                    newDims["height"]  = height;
                } else if(xRatio * height < maxHeight) {
                    newDims["height"] = Math.round(xRatio * height);
                    newDims["width"]  = maxWidth;
                } else {
                    newDims["width"]  = Math.round(yRatio * width);
                    newDims["height"] = maxHeight;
                }
                return newDims;
            }
        </script>

O.k. Now, I have the following I am working with:

Code:

<!--Image 5--> <img
 src="http://blahblah.com/images/red2.jpg" alt="Item photo"
 onmouseover="document.swap.src='http://blahblah.com/images/red2.jpg';"
 height="80">

in which you can see that onmouseover, a larger image is shown (it's not rescaled). You can also see that the url of an img is specified there.

How can I get the rescaled image to show in that spot or the url from the picUrl Array and the image shown in the correct size, in that spot of Code:

onmouseover="document.swap.src=

?

This is the entire area in which the onmouseover code will be used in case you need it.

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>

Hey guys,

Im a little stuck with a JQ script im trying to create.

First the html:
Code:

            <div id="image_holder">
                <img src="images/default.jpg" id="image_swap" />
            </div>
            
            <ul id="links" class="test">
                <li><a href="#" name="images/01.jpg">Wall-E 2</a></li>
                <li><a href="#" name="images/02.jpg">Joker 1</a></li>
                <li><a href="#" name="images/03.jpg">Joker 2</a></li>
            </ul>

What im trying to accomplish is:

1.) When the mouse enters #links I want it to create a bool staying true if it's in there false if it has left.
2.) if the mouse is:
2a) swap the current image loaded out with the new image to be loaded
else:
2b.)swap the current image loaded out with the default image.

I have several different attempts at this, this script below is a working attempt. But because im referencing the actual "a" attribute, whenever I goto hover on a new link, it will quickly show the default image...

Code:

jQ('#links li a').hover(
	function() {
   		var img = jQ(this).attr("name");
		var parent = jQ(this).parent().parent().attr("id");

		jQ("#image_swap").fadeOut("medium", function() {
			// if mouse is within the #link id dont show default image
			if(parent === "links") {
				jQ(this).attr("src", img);
				jQ(this).fadeIn("medium");
			}
			// if the mouse is outside the #link id show the default image
		})
			
	},
	function() {
		jQ("#image_swap").attr("src", "images/default.jpg");
	}
);

Also as a side note, before asking why im using the "name" attribute to store the URL of the image, it's because the href will be pointed to an actual page.

Hey,

I'm new to javascript, and I know there are a lot of tutorials out there. My only problem is that i'm finding it difficult to integrate stuff from different tutorials together.

Basically, I want text links to swap the image on the website, but then want to allow a zoom function or lightbox function to the image that appears.
I'm not best at explaining things so i've done an example below. After clicking the link, the image changes. i want to be able to do the zoom on the image that it's changed to. is this possible? any help would be much appreciated.


http://www.jamesbutterworth.co.uk/untitled-1.html

Below is the routine I am using that when invoked swaps images for other images:

Code:

<script>
function swapImage(swapContName) {
      if (swapContName == 'mainImage1') {
      document.getElementById('mainImage1').src = 'L1Bswap.gif';
      document.getElementById('hand1').src = 'handr.gif';
      document.getElementById('help1_pic').src = 'answers2.gif';
      document.getElementById('homework').src = 'spacer.gif';
      document.getElementById('instruct').src = 'spacer.gif';
      document.getElementById('instructflag').src = 'spacer.gif';
      }
}
</script>

Fairly simple and works well.

But one of the images I would like to vanish (using the empty spacer.gif) has a border:

Code:

<img id="instructflag" border="1" src="FLAG.gif" width="23" height="15" align="left">

It must have this black border, but when it gets swapped for a blank, I am left with the black square.

Anyone have any idea how to vanish the border along with the graphic?

(I have some vague idea that "border" is not used any more, but anyway...).

So what I have to do is have 1 image on my webpage and a button. When the button is clicked the image needs to toggle back and forth between img1 and img2.

After searching I've found ways to do this using the image itself as a button. But I'm having trouble getting it to work with an input button.

Any help would be greatly appreciated.

I am working on a demo for a movie site, and 90% of everything seems cool.
Here

I am doing php.flushes, .htaccess caching and using PNGs to help with performance. I might start using another sub site to grab all the scripting from to increase performance, but it seems a tad bit slow at the moment.

- There are a few issues one being when you click on X-Men and look at the gallery the images seem to flicker sometimes going from image to image.

I am using a fade script I found and then using setTimeout() to give the fade script time to do its thing then call for a new image.
Code:

		FadeOpacity(main_img_id, 100, 0, 600, 12);
		setTimeout("updateGallery('"+target_arr+"','"+main_img_id+"')", 600);

- Also in the same area I am checking clientHeight after each image modifying the marginTop. The thing with that is the clientHeight only seems to update after the second function call. I tried using a setTimeout() but that didn't nothing.
Code:

		document.getElementById(main_img_id).src = "assets/movie_images/"+arr[i];
		img_height = document.getElementById(main_img_id).clientHeight;

Any suggestions with improving image load performance, the clientHeight issue or the image flickering issue would be appreciated.

I have an on/off image piece of code: (probably out of date!)

Code:

<!--
var NN3 = false;
image1= new Image();
image1.src = "photo1.gif";
image1on = new Image();
image1on.src = "photo2.gif";
function on3(name)   {
        document[name].src = eval(name + "on.src");
}
function off3(name)  {
        document[name].src = eval(name + ".src");
}
NN3 = true;

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {
        if (NN3) off3(name);
}
// -->

My problem is that I am trying to add sound to the clicking and mousing out of the image. Without sound, it works (and works exactly the way I want it to) like this;

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');" onmouseover="off('image1')">
<img src="photo1.gif" name="image1"></a>

Adding (flash)sound I can do this and it works OK too:

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');mySoundObj1.TGotoAndPlay('/go','start'); return true;" onmouseout="off('image1');">
<img src="photo1.gif" name="image1"></a>

But what I want to occur is that a second "swish" sound happens onmouseout (in the red place below) but ONLY if the mousedown has already occurred:

Code:

<!--
...

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {

 [SWISH SOUND HERE] 

        if (NN3) off3(name);
}
// -->

I hope this doesn't read complicated. I know it's really a simple toggle with an if, but I've tried dozens of things to no avail.

I have to replicate this many hundreds of times in a website...and I have to stick with flashsound (which I like anyway).

Any help would be appreciated.

I have one image on a page and I am trying to mix 2 javascripts actions on that image:
- the first one is an automatic daily change of images (3 different images in this example)
- the second one is the display of the same image in bigger when the mouse is over it.
The total of images are 6 (2 different sizes for 3 images).

I have made a search but I didn't find the solution. Here is the code (the daily change works but not the rollover.
Thank you to correct it or giving an other solution. (My level in Javascript: low)

[CODE]<SCRIPT LANGUAGE="JavaScript">
function todaysPhoto(){
var i= 3 ;
var todaysFoto=new Array();
todaysFoto[1]="img1_small.jpg";
todaysFoto[2]="img2_small.jpg";
todaysFoto[3]="img3_small.jpg";
var todaysPic=new Array();
todaysPic[1]="img1_big.jpg";
todaysPic[2]="img2_big.jpg";
todaysPic[3]="img3_big.jpg";

t=new Date().getTime();
var days=Math.floor(t / 86400000) % i+1;
document.getElementById("todaysfoto").src="images/photos/"+todaysFoto[days];

function SwapImg(){
document.todaysfoto.src ="images/photos/"+todaysPic[days];
return true;}

function SwapBack(){
document.todaysfoto.src ="images/photos/"+todaysFoto[days];
return true;}
</SCRIPT>

<body onload="todaysPhoto()">
<a href="" onmouseover="SwapImg()" onmouseout="SwapBack()">
<img name="todaysfoto" width="150px" height="100px" id ="todaysfoto" /></a>[CODE]

Ok so I have a problem which I previously thought I had solved.

I am creating a JavaScript Toggle off and on panel and although I have the code sussed for the toggling function there is something off on the image swap function

I currently have it set up on two panels, so the code is used multiple times, the problem is it changes both buttons each time rather that just the one that was clicked.

Anyway let's see what you think

Javascript:
Code:

<script type="text/javascript">
var imageURL = "../images/portfolio/open.png";

function changeImage() {

     if (document.images) {
              if (imageURL == "../images/portfolio/open.png") imageURL = "../images/portfolio/close.png";
         else if (imageURL == "../images/portfolio/close.png") imageURL = "../images/portfolio/open.png";
         
         document.images["img1"].src = imageURL;
		 document.images["img2"].src = imageURL;
     }
} 
</script>

HTML:
Code:

<a href="#" onclick="toggle_visibility('job1');"><img name="img1" src="../images/portfolio/open.png" onClick="changeImage();"></a>
<a href="#" onclick="toggle_visibility('job2');"><img name="img2" src="../images/portfolio/open.png" onClick="changeImage();"></a>

Any idea what I have done wrong and why it is changing both of the images ('img1' and 'img2') instead of changing them seperately as they are clicked ??

I'm a designer and HTML/CSS coder only. I'd like to ask the community for the simplest solution on making an image swap to different image when the user clicks one of the many thumbnails. It's pretty standard gallery functionality, "click the thumbnail to see the big version".

I'm hoping to get some JavaScript that is easy to configure even though I don't know how to write JavaScript.

Here's a link to the page:
http://clientzone.thermostudios.com/.../bouquets.html
The thumbnails are on the left and the replicable image on the right.

Thanks in advance.

Hey everyone,

I'm just trying to figure out if it is possible to swap the pages background image when a button is clicked without refreshing the page? I've looked around and can't really find anything helpful.

Any tips or pointers in the right direction would be much appreciated

Thanks

YD

Hi guys,

I have this little snippet of code that swaps a toggle image for news for a plus or minus sign showing if the div is open or closed. This code has worked before but i made a couple modifications today and it stopped working unexpectedly and i'm not sure why its failing.

I am presetting the div tag with a plus sign with css and then modifying it with javascript. The problem i am having is that when the div tag has been opened it does not swap the image to min.gif anylonger. It remains max.gif.


Here's the javascript code
Code:

	var News_Images = new Array();
	News_Images[0]="images/max.gif"
	News_Images[1]="images/min.gif"

function DisplayNews(body,box,link,id){
		
		$(body + " > div > .news_box").each(function(){
	        if($(this).css("display")=="block"){
	        	$(this).slideToggle("slow");
	        }
	     });

	     $(body + " > div > a[class='open_button_closed']").each(function(){ // search and change the + / - images
	     	  $(this).css("background-image",'url('+script_path+News_Images[0]+')');//
	     });

	     $(body + " > div > a[class='open_button']").each(function(){
	     	  $(this).css("background-image",'url('+script_path+News_Images[0]+')');//
	     });

	     if($(body + " > div > #"+box+id).css("display")=="none"){
	     	$(body + " > div > #"+box+id).slideDown("slow");
			
	     	$(body + " > div > #"+link+id).css("background-image",'url('+script_path+News_Images[1]+')');//
			alert("box =" + box + " id = " + id + " link =" + link);
	     }
	}

And here is the html sample
Code:

    <div class="recent_news_box">
    <a onclick="DisplayNews('#display_recent','news_link','open_button',3); return false;" id="open_button3" class="open_button"></a>
    <a class="link_block" href="">Some Title Text</a>
        <div style="display: none;" class="news_box" id="news_link3">
        <img class="front_image" alt="" src="" align="right">
        <span class="date">Jul 21, 2009</span>
        <div>Some Stuff to display here will be short text</div>											
        </div>
    </div>

Thanks in advance.