Develop Reference

Multiple Image swap

I have 10 images of an empty black square. Below them, I have 10 black boxes labeled 0-9. My goal is to allow the user to click on a numbered square, and select which blank square he wants to place it.
The user must be able to do this with every numbered square. (I have a math problem that I want the user to solve by clicking the images and put them where they need to go to solve the equation). My train of thought was to obtain the image clicked by using getElementId and storing it into a variable, and continue the process.
I'm not sure if this is possible. My thinking was "Click image, identiy what was clicked, store it in a temporary variable holder, and swap with the second (blank) image clicked).
My HTML:
These are the blank images 0-9:
<img src="blank.jpg" id="blank0" onclick="swap()" width="30" height="30"> </button>
<img src="blank.jpg" id="blank1" onclick="swap()" width="30" height="30"> </button>
etc. etc.
These are the numbered images:
<img src="0.jpg" id="0" onclick="" width="30" height="30"> </button>
<img src="1.jpg" id="1" onclick="" width="30" height="30"> </button>
etc.

Try something like this:
(top of all JS):
var holder = '';
var holderId = '';
Then add this to numbered images:
<img src="0.jpg" id="number0" onclick="setHolder(this.src,this.id)" width="30" height="30">
And this to blank:
<img src="blank.jpg" id="blank0" onclick="swapHolder(this)" width="30" height="30">
Then create the two functions like this:
function setHolder(src,id) {
holder = src;
holderId = id;
}
function swapHolder(img) {
img.src = holder;
document.getElementById(holderId).src = 'blank.jpg';
holder = '';
holderId = '';
}

Javascript img tag src switch function not working

I have a small app the uses 3 images as buttons, the images are different colors, above the image buttons there is a big pair of glasses, depending on what color button you press the color of the glasses will change to match the color of the button that was pressed. The problem is I am getting a "Cannot set src to null" error.
Here is a jsfiddle: http://jsfiddle.net/vAF8S/
Here is the function
//Functions that change the glasses image
function changeColor(a){
var img = document.getElementById("imgG");
img.src=a;
}

you have two Id's for the tag. you should have only one ID. change your html.
<section id="banner" >
<img id="imgG" src="images/orangeG.png"><br>
<img id="wcolorButton" src="images/whiteT.png" />
<img id="bcolorButton" src="images/blueT.png" />
<img id="ocolorButton" src="images/orangeT.png" onClick="changeColor('images/whiteG.png')" />
</section>
FIDDLE

you are getting this error because you have applied ID twice to the same element
use this HTML
<section id="banner" >
<img class="glasses" id="imgG" src="images/orangeG.png"><br>
<img class="wcolorButton" src="images/whiteT.png" />
<img class="bcolorButton" src="images/blueT.png" />
<img class="ocolorButton" src="images/orangeT.png" onClick="changeColor('images/whiteG.png')" />
</section>

loading a whole series of images using jquery

I am using this library and what I want to do is to dynamically load the entire series of images in to an element:
<div id="product" style="width: 640px; height: 300px; overflow: hidden;">
/* These images are loaded and appended to the div element dynamically
<img src="images/01.jpg" alt="" />
<img src="images/02.jpg" alt="" />
<img src="images/03.jpg" alt="" />
<img src="images/04.jpg" alt="" />
<img src="images/05.jpg" alt="" />
<img src="images/06.jpg" alt="" />
/*
</div>
and then call the j360 library to set it up:
jQuery(document).ready(function() {
jQuery('#product').j360();
});
after the images have been loaded.
I have only seen tutorials where one image is loaded like this....
Are there any techniques for loading and appending a bunch of images in order?
Thanks in advance

Not sure what you mean by "load", but you can simply append the img element to the parent div, and the browser will say, "Hey, there's an image with a src, let me go grab it."
Here a working example on JSFiddle

If I understand correctly, you want to label the div as loading until ALL of the images to be appended have been properly loaded. This is doable, but a little complicated.
I am assuming you are able to generate an ordered list of image URLs. If this is not the case, then you have some more grunt work to do.
Essentially what we want to do is have each image check off whether or not it has loaded. Once they have all loaded, we can called a done handler and you can replace the loading .gif with your product view. Let's do it.
HTML
<div id="product" style="width: 640px; height: 300px; overflow: hidden;"></div>
JavaScript
$(document).ready(function() {
var imageURLs = [ ... ]; // you need to generate this (not too hard)
var imagesLoaded = 0;
var images = [ ];
$.each(imageURLs, function(i, imageURL) {
var $img = $('<img/>').load(function() {
imagesLoaded++;
// See if this was the last image we need to load.
if (imagesLoaded == imageURLs.length) {
showProductView();
}
})
.attr('src', imageURL);
images.push($img);
});
});
var showProductView = function() {
var $product = $('#product');
$.each(images, function(i, $img) {
$product.append($img);
});
$product.removeClass('loading');
$product.j360();
}

Don't know if this is specifically what you're looking for in your question, but this plugin will notify you when a set of images are loaded, and allow to perform a callback function after each individual image loads, or the whole set:
http://www.farinspace.com/jquery-image-preload-plugin/
It works great.

More than one JS button on page with rollover state on page

I'm just learning JS so that I can have buttons with rollover states and sound effects. I was doing pretty good until I tired to add additional buttons, which has caused me to lose the rollover state.
You can see my example of one button here: http://www.ultralaboratories.com/sound1.html
And two buttons here: http://www.ultralaboratories.com/sound2.html
For simplicity sake, I used the exact same button twice, but there'll be 5 unique buttons when I'm done.
Any thoughts? Thanks!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
title>Untitled Document</title>
<audio id="audio_element" src="sound.mp3"></audio>
<script>
var audio = document.getElementById("audio_element");
audio.volume = 0;
audio.play();
function playAudio() {
audio.currentTime = 0.01;
audio.volume = 1;
audio.play();
}
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from non JavaScript Browsers
Rollimage = new Array()
Rollimage[0]= new Image(156,311)
Rollimage[0].src = "/Images/Banner/e.up.jpg"
Rollimage[1] = new Image(156,311)
Rollimage[1].src = "/Images/Banner/e.over.jpg"
function SwapOut(){
document.element.src = Rollimage[1].src;
return true;
}
function SwapBack(){
document.element.src = Rollimage[0].src;
return true;
}
// - stop hiding -->
</SCRIPT>
</head>
<body>
<div onmouseover="playAudio()">
<P align="center">
<IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0>
<IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0>
</P>
</div>

You're combining HTML5 and HTML3.2 in your document... That's REALLY bad.
First of all, hiding JavaScript from old browsers is a sign you're still living in the 90s. It's not needed anymore.
Second, when you ask JavaScript for document.element, which one do you mean? If there's only one, that's okay because it can guess. With two or more, it can't. To know which image was hovered over, pass this as an argument to SwapOut and SwapBack (ie. onmouseover="SwapOut(this)"). Then take that argument and get the image from it. In this case, elm.children[0] will work just fine (assuming you named the parameter elm). Resulting functions:
function SwapOut(elm) {elm.children[0].src = Rollimage[1].src;}
function SwapBack(elm) {elm.children[0].src = Rollimage[0].src;}
(You could even combine both functions into one and have the 1 or 0 be a second parameter)
Then just a few things about the general layout: You have the audio element in the head, when it's a body element. You are playing the sound at zero volume for no reason at all. You can move the getElementById into the function to avoid an unnecessary global variable.
Finally, you must use an HTML5 doctype (namely <!DOCTYPE html>) if you want to use HTML5 elements.

try adding
onmouseover="playAudio()"
to each img and not the div.
<IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0 onmouseover="playAudio()" \>
<IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0 onmouseover="playAudio()" \>
Dont forget to close your image tags \>

Add id's to the images, and then pass those image id's into your swap functions:
<A HREF="http://www.joemaller.com/" onmouseover="SwapOut('image1')" onmouseout="SwapBack('image1')">
<IMG ID="image1" SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0>
</A>
<A HREF="http://www.joemaller.com/" onmouseover="SwapOut('image2')" onmouseout="SwapBack('image2')">
<IMG ID="image2" SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0>
</A>
function SwapOut( id )
{
document.getElementById( id ).src = Rollimage[1].src;
return true;
}
function SwapBack( id )
{
document.getElementById( id ).src = Rollimage[0].src;
return true;
}
​

For the image portion, a more modern way to handle it is to use CSS instead. Have you heard of CSS sprites before? They are so awesome! They require a little image production but it's worth it. You can put multiple buttons (or button backgrounds, arrows, graphic headlines, etc.) into one big sprite and it cuts way down on HTTP requests.
<!-- HTML -->
button
button
The example below assumes your image has two button states stacked together (regular and hover). Reposition the background image on hover/focus and ouila! Interactivity. You can also target more than one button with the generic class & then resize/position by ID.
/* CSS */
a.btn {
background: transparent url(images/some-button-sprite.png) no-repeat;
display:block;
}
a#someBtn {
background-position:0 0;
height:25px;
width:100px;
}
a#someBtn:hover,
a#someBtn:focus {
background-position: 0 -26px;
}

Making image clickable without anchor tag

I have been trying to make a image in tag clickable without surrounding it with anchor tag.
Purpose is that I have used cfyon script from yahoo to make a scrolling marquee of images. The marquee is fine but the requirement includes making each picture of the marquee clickable. Onclick, a javascript function will be called. These images are fed to the script using the following code.
<script type="text/javascript">
Cufon.now();
var marqueecontent = '<img src="marequee/DSC_11801.jpg" width="281" height="250" alt="Monique Relander" class="highslide" onclick="return hs.expand(this)"/><img src="marequee/DSC_10541.jpg" width="274" height="250" alt="Monique Relander" /><img src="marequee/leather-chairs1.jpg" width="221" height="250" alt="Monique Relander" /><img src="marequee/tassel-lamp.jpg" width="194" height="250" alt="Monique Relander" /><img src="marequee/angellamp.jpg" width="162" height="250" alt="Monique Relander" /><img src="marequee/daybed.jpg" width="384" height="250" alt="Monique Relander" /><img src="marequee/birdcage.jpg" width="208" height="250" alt="Monique Relander" /><img src="marequee/oakchair.jpg" width="161" height="250" alt="Monique Relander" /><img src="marequee/candelabras.jpg" width="188" height="250" alt="Monique Relander" />';
</script>
Surrounding individual tags with is not working.
The anchor tag look like
Please help!

Say you have an image like so
<img id="example" src="blah.jpg" />
You can make this clickable by styling it with css:
#example
{
cursor:pointer;
}
and then using javascript + jquery library
$("#example").click(function() {
window.location.href = 'http://www.google.co.uk'
});
EDIT:
I put together a jsfiddle to show this in action : http://jsfiddle.net/sn6um/1/show/

You can add the jquery library and do something like that
$("img").click(function (){/*Here you put your action*/});

You have a couple options for solving this. First would be to build the images in JavaScript and add them tot he container. During this process you could attach the click handlers. Secondly you could add the handlers after you set the html content of the marquee. Let's look at both approaches:
Building Images With JavaScript
var myImage = new Image();
myImage.src = 'foo.png';
myImage.onclick = function(){
alert( 'You clicked me' );
};
...
marqueeContainer.appendChild( myImage );
This would need to be done once for each image you have.
Set the HTML Content, then Add Event Handlers
var myHTML = '<img src="foo.png" />';
marqueeContainer.innerHTML = myHTML;
marqueeContainer.images[0].onclick = function(){
alert( 'You clicked me' );
};
This method lets you use your current variable which contains all of your images and their attributes.

<input type="image" src="submit.gif" alt="Submit" width="48" height="48">
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_alt
Don't know when the options for "type=" for the input tag expanded but "image", "date", "number" are a wee revelation