Develop Reference

Replace every onclick of the page with img src link?

I use a webpage where I want to replace the onclicks, of a bunch of links, with the modified src link of the <img> each link contains.
For example, the Greasemonkey script should change this:
<p class="listphotos">
<a onclick="alert('I'm a really annoying function! X'); return false;" href="#">
<img alt="photo" src="http://.../min/x.jpg">
</a>
<a onclick="alert('I'm a really annoying function! Y'); return false;" href="#">
<img alt="photo" src="http://.../min/y.jpg">
</a>
</p>
To this:
<p class="listphotos">
<a onclick="http://.../max/x.jpg" href="http://.../max/x.jpg">
<img alt="photo" src="http://.../min/x.jpg">
</a>
<a onclick="http://.../max/y.jpg" href="http://.../max/y.jpg">
<img alt="photo" src="http://.../min/y.jpg">
</a>
</p>
I've tried this (see also this jsFiddle):
var link = $("p.listphotos a img").prop("src").replace("min", "max");
$("p.listphotos a").prop("onclick", link);
$("p.listphotos a").prop("href", link);
but the right pictures do not get linked.

Setting onclick to a link is an error. onclick needs to be valid javascript. But, since it looks like you're trying to "delink" those photos, best to remove the onclicks altogether.
Also, you can't set the href that way (unless you want every link to go to the same photo). You need to loop. jQuery's .each() should do the trick. Like so:
$("p.listphotos a img").each ( function () {
//-- `this` is each target image, one at a time
var jThis = $(this);
//-- More robust replace
var bigLink = jThis.prop ("src").replace (/\bmin\b/i, "max");
//-- The img parent is the link we're after.
jThis.parent ().prop ("href", bigLink).removeProp ("onclick");
} );
Note that prop and removeProp are the correct way to kill an onclick. But, if you inspect the page source in some browsers, the attribute will still be there. Don't worry, the onclick will no longer function.

I think you can try something like this
var numberClick=0;
var Images= ['image1.png','image2.png'];
function changeIndex(index){
if (index >=0 && index < Images.length){
$("p.listphotos a img").attr("src", Images[index]);
return true;
}
return false;
}
then you can use it in this way
function showImage(){
if (changeIndex(numberClick)){
numberClick+=1;
}
else{
numberClick=0;
}
}
and then
$("p.listphotos a img").click(function(){
showImage();
return false;
});

Iterate over area elements with $.each() or for loop

Is there a way to avoid repeating code when iterating over area elements with Jquery? or an easier way with plain javascript? A snippet of the HTML:
<img id="img1" src="image.png" width="400px" height="400px" usemap="#area_click"title="click to shade different areas" />
<map name="area_click">
<area href="" shape="poly" coords="33,149,53,151,49,183,45,205,27,197,29,171" alt="area1" >
<area href="" shape="poly" coords="157,148,161,168,161,201,143,204,139,180,137,152" alt="area2" >
<area href="" shape="poly" coords="51,144,55,126,57,114,41,88,32,112,32,140" alt="area3" >//...35 more areas follow...
</map>
I have tried...
Create array from map children.
var kids=$("map[name*='area_click']").children();
Loop through the array.
for (var k=0;k<kids.length;k++){
kids[k].click(function(event){
event.preventDefault();
$("#" + AreaArray[k]).fadeToggle(500).fadeTo(300,opacityArray[k]);});}
I thought I was missing something about the array-like object created by children().
So I tried...
1.Create array from map children. Then use eq() to grab references to the DOM elements in the array.
var kids=$("map[name*='area_click']").children();
var kidsArray = kids.eq();
2.Loop through the array.
for (var k=0;k<kidsArray.length;k++){
kidsArray[k].click(function(event){
event.preventDefault();
$("#" + AreaArray[k]).fadeToggle(500).fadeTo(300,opacityArray[k]);});}
Also tried using $.each and find() instead of children(). But it seems $.each() cannot digest area elements. The following generates a type error in the jquery.min script in the Firebug console.
TypeError: t is undefined
...nction(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"...
var kids=$("map[name*='area_click']").find("area");
var k=0;
$.each(kids.eq(k)).click(function(event){
event.preventDefault();
$("#" + areaArray[k]).fadeToggle(500).fadeTo(300,opacityArray[k]);
k++;
});
I'm sure I am doing something wrong in trying to pass a reference to the array to the for loop or $.each(), I just don't know what. Any help? Or am I going about the whole thing backwards?

Looks like a problem with the closure variable k, try
kids.each(function (k) {
$(this).click(function (event) {
event.preventDefault();
$("#" + AreaArray[k]).fadeToggle(500).fadeTo(300, opacityArray[k]);
});
})
Or
kids.click(function (event) {
event.preventDefault();
var k = kids.index(this)
$("#" + AreaArray[k]).fadeToggle(500).fadeTo(300, opacityArray[k]);
});

Click on image not working

For some reason I cannot click on this image to show the fancybox if I have "onmouseover" as a parameter:
<area onmouseover="toggleOverlay('SteWoz',1);" id="locSteWoz" alt="Test" class="fancybox" coords="24,51,236,244" href="http://www.google.com" rel="iframe" shape="rect" title="Test">
EDIT: This is what toggleOverlay does:
<script>
function toggleOverlay(name, newState){
var element = 'imgOverlay' + name;
var newDisplay
if (newState == 0) {newDisplay = 'none'}
if (newState == 1) {newDisplay = 'block'}
document.getElementById(element).style.display = newDisplay;
//document.getElementById(element).style.z-index = '5';
$(element).hide().fadeIn(4000);
}
</script>
If I remove "onmouseover" it works fine. How can I "fix" this?
James

First, this line :
$(element).hide().fadeIn(4000);
... doesn't really do anything because at this point element still need a proper sign (either # or .) to define the selector so in this case should be :
$("#" + element).hide().fadeIn(1000);
Second, if you are overlaying another image over the image that uses the image map, what I assume you are doing like in this JSFIDDLE,
... then there is nothing you can do to "make the overlay not respond to any clicks so that the image below can be clicked".
What you could do however, is to make the overlay image to use the same image map as the image below so, within your toggleOverlay() function, you could tweak this line
$("#" + element).hide().fadeIn(1000);
... into this
$("#" + element).hide().fadeIn(1000).attr("usemap", "#Map");
... assuming that your html looks like
<map name="Map" id="Map">
<area onmouseover="toggleOverlay('SteWoz',1);" id="locSteWoz" class="fancybox" shape="square" coords="0,0,415,319" href="{target}" title="title" alt="alt" />
</map>
... otherwise use the corresponding ID of the map tag.
See updated JSFIDDLE

Change image after click

I can't create simple gallery photos. After click to small image I need reload image in place for main image.
gallery.js
imgArray = [
'../images/1.jpg',
'../images/2.jpg',
'../images/3.jpg',
'../images/4.jpg',
'../images/5.jpg',
'../images/5.jpg'
];
function changeImage(nameOfImage){
document.getElementById('mainImage').src = imgArray[nameOfImage.id];
}
html
<div align="center" class="mainImageDiv">
<img id="mainImage" src="images/action/1.jpg" alt="1.jpg, 206kB" title="1" height="600" width="500">
</div>
<img src="images/action/min1.jpg" alt="min1.jpg, 18kB" title="min1" height="120" width="100" />
<img src="images/action/min2.jpg" alt="min2.jpg, 18kB" title="min2" height="120" width="100" />

Something like this is the code you need:
http://jsfiddle.net/M2BSu/
var imgArray = [
'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Brain_human_sagittal_section.svg/295px-Brain_human_sagittal_section.svg.png',
'http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Solanum_muricatum_Flower_and_Fruit.jpg/220px-Solanum_muricatum_Flower_and_Fruit.jpg'
];
var counter = 0;
document.getElementById('my_button').onclick = function () {
document.getElementById('mainImage').src = imgArray[counter % imgArray.length];
counter += 1;
}
EDIT It seems I misunderstood the problem. I guess the error is, as people commented, that your id is not a valid array index. You can use a real object instead, like this:
<a href="#" id="a_full_name" onClick="changeImage(this)">
var images = {
'a_full_name': 'path to image',
'another_img_id': 'path to this image'
};
function changeImage(anchor_object){ ... } // what you are passing is not the name of the image
And with that your code should work. Arrays are not very reliable in JavaScript (since they are not real arrays)
EDIT: Once found the problem, I give you this easy solution for your problem. As always, the simpler the better. Don't read any array or whatever, just get the path of the big image, from the path of the small image. You will not have to do any annoying maintenance in parallel of the html and the array. You just have to keep a consistent naming between the thumbnail and the big picture.
html
You don't really need an anchor element. If you want the pointer mouse, change the CSS
<img onClick="changeImage(this)" src="images/action/min1.jpg" title="min1" />
JavaScript
function changeImage(image_clicked){ // you pass the image object
var min_path = image_clicked.src;
// adapt the path to point to the big image, in this case get rid of the "min"
var big_path = min_path.replace("min", "");
document.getElementById('mainImage').src = big_path;
}
Keep it simple.

jQuery not creating area tags

I'm trying to use jQuery to dynamically create an image map, and I ran into a weird behavior:
alert( $('<area />').size() ); // 1
alert( $('<area shape="circle" />').size() ); // 0
alert( $('<area />').attr("shape", "circle").size() ); // 1
In other words, I can't create an area tag all at once; if I say
$('<area shape="circle" coords="50,25,4" href="#" alt="foo" />')
then nothing is created. However, it works if I do it gradually, e.g.
$('<area />')
.attr("shape", "circle")
.attr("coords", "50,25,4")
.attr("href", "#")
.attr("alt", "foo");
I have no idea why this is, because I can create all kinds of other elements with attributes and content, e.g.
$('<div id="foo" />')
$('<div id="bar">Hello World!</div>')
so I'm not clear on why this isn't working. This isn't all that important since I can make it wirk by chaining calls to attr, but that's annoying and I'd like to understand this behavior.

An <area /> element is only defined inside an image map (i.e. <map> element). So essentially the following is failing (as this is what jQuery is doing with your markup):
var div = document.createElement('div');
div.innerHTML = '<area shape="circle" coords="50,25,4" href="#" alt="foo" />';
return div.childNodes; // this is empty, as the browser didn't allow
// the <area /> element inside the <div> element
It's just one of those things obviously the great jQuery has not accounted for (yet). In the meantime try:
var $area = $(
'<map><area shape="circle" coords="50,25,4" href="#" alt="foo" /></map>'
).contents();
// $area is the jQuery object for the newly created <area /> tag
$area.attr('coords'); // "50,25,4"
// etc