bild pfad an link hängen

[option]

hallo leute,

ich probiere gerade ein kleines "bookmarklet" zu erstellen.
es soll der bild pfad an einen link gehängt werden.

javascript:
for(i=0;i<document.getElementsByTagName('img').length;i++){
    var imgTag=document.getElementsByTagName('img')[i];
    imgTag.onclick=function(){
       window.open("http://www.example.com/#/"+imgTag.src);
    }
}void(0)

allerdings wird immer das gleiche bild geöffnet! weiss jemand warum?
grüße

[Martin Kraft]

Zitat von option

allerdings wird immer das gleiche bild geöffnet! weiss jemand warum?

Weil die Variable imgTag am Ende der for-Schleife immer auf das letzte Bild zeigt und imgTag.src somit immer dieselbe URL enthält.

Es sollte funktionieren, wenn Du in der onclick-Funktion statt imgTag.src einfach this.src verwendest.

[option]

das funktioniert allerdings nur alleinestehend und nicht in dem zusammenhang:

window.open("http://www.example.com/#/"+this.src);

woran könnte das liegen?

[Martin Kraft]

Zitat von option

das funktioniert allerdings nur alleinestehend und nicht in dem zusammenhang:

window.open("http://www.example.com/#/"+this.src);

woran könnte das liegen?

Ein bisschen präziser bitte! Was funktioniert und was nicht?

[option]

ok danke geht jetzt.

kurze frage noch:
kann man eigentlich um die bilder einen mehrfarbigen rahmen setzen? (z.b. erst weiß, dann rot und dann blau.)

[Martin Kraft]

Zitat von option

kurze frage noch:
kann man eigentlich um die bilder einen mehrfarbigen rahmen setzen? (z.b. erst weiß, dann rot und dann blau.)

Mal abgesehen davon, dass ich das aus gestalterischer Sicht für ratsam halte, kannst Du natürlich beliebig viele <div>s um das Bild legen und diesen dann per CSS z.B. einen Randfarbe zuzuweisen.

Das kann man natürlich vorab in HTML erledigen, oder aber zur Laufzeit mit JavaScript. Für letzteres würde ich Dir aber raten dafür auf ein Framework wie jQuery zu verwenden. Dort gibt es dafür die Methode wrap.

[option]

jQuery kann ich dafür leider nicht nehmen u.a. weil es halt ein bookmarklet wird.
mit den <div>'s hört sich schwierig an.

javascript:for(i=0;i<document.getElementsByTagName('img').length;i++){
var imgTag=document.getElementsByTagName('img')[i];
imgTag.style.border='12px solid #ffff00';imgTag.onclick=function(){ 
return !window.open('http://www.example.com/#/'+this.src);}}void(0)

kann man vielleicht irgendwie mehrfach den style.border setzen?

[Nicmare]

Zitat von option

kann man vielleicht irgendwie mehrfach den style.border setzen?

natürlich - nicht! da wirst du um mehrere divs nicht drum herum kommen

[thomas_E]

@option, auf die Schnelle

PHP-Code:

var container, target=imgTag, colors=['#FF0000', '#00FF00', 
'#0000FF'];
if(target){
    for(var i = colors.length; i--; ){
        container = document.createElement('div');
        container.style.border = '2px solid '+ colors[i];
        container.style.width = target.offsetWidth +'px';
        container.style.height = target.offsetHeight +'px';
        target.parentNode.insertBefore(container, target).appendChild(target);
        target = container;
    }
    target.style.margin = (colors.length * -2) +'px';
}