✔ Bild ID zuweisen

E

eee

Mitglied
hallo,

ich möchte dem großen bild eine id zuweisen, damit ich es per css formatieren kann. wie muss ich vorgehen? document.id = "large" will nicht klappen :( vielen dank!

HTML: 
<img id="small" src="pic-smal.jpg" onClick="change()">

<script type='text/javascript'>

var i=0;

function change(){

 if(i==0){

 document.getElementById('small').src="pic-large.jpg";

 i++;

 } else {

 document.getElementById('small').src="pic-small.jpg";

 i--;

 }

}

</script>
 
Zuletzt bearbeitet:
Hallo!

Das Objekt document enthält den Inhalt des Browserfenster. Die Attribute von Elementen kannst Du außerdem nur über element.getAttribute(attr) abfragen und ensprechend mit element.setAttribute(attr, value) setzen.

In deinem Code müsstest du deinen großen Bildern entweder eine andere ID oder CSS-Klasse zuweisen, damit du sie für CSS unterscheidbar machst. Momentan sehen die beiden Bildgrößen für CSS gleich aus.
 
danke, scheint wohl doch etwas komplizierter zu sein als vermutet. ich habe mindestens ein halbes dutzend tutorials für "bild bei klick vergrößern" im internet gefunden, aber keines geht soweit, dass sich das bild in einer neuen ebene öffnet.
 
eee hat gesagt.:
dass sich das bild in einer neuen ebene öffnet
Zum Vergrößern anklicken....
Ich bin mir nicht ganz sicher ob ich dich richtig verstanden habe:

Ich würde den src-Wert und den CSS-Klassennamen ändern:
HTML: 
<img class="small" src="pic-small.jpg" onClick="change(this)">

Javascript: 
function change(image){
  image.setAttribute("class", "large");
  image.setAttribute("src", "pic-large.jpg");
}

CSS: 
img.small{
  /* Eigenschaften für die kleinen Bilder */
}


img.large{
  /* Eigenschaften für die großen Bilder */
}
 
Zuletzt bearbeitet von einem Moderator:
danke, leider habe ich probleme die beiden skripten zusammenzuführen. mein code sieht nun so aus:

HTML: 
<html>
<head>
<style type="text/css">
.small{padding:5px; border:black solid thin}
.large{padding:10px; border:black solid thin; background-color:gray; position:fixed; z-index:1}
</style>
</head>
<body>

<img class="small" src="a_klein.png" onClick="change(this)">


<script type='text/javascript'>

function change(image){
  image.setAttribute("class", "large");
  image.setAttribute("src", "a_gross.png");
}

</script>

</script>

</body>
</html>

bei einem klick auf das kleine bild öffnet sich das große bild in einer neuen ebene. allerdings sollte sich das große bild bei einem neuerlichen klick wieder schließen.
 
Das sieht ja soweit schon ganz gut aus! :) Um zwischen groß und klein wechseln zu können, benötigst Du eine Abfrage, ob das Bild groß oder klein ist. So kannst Du die ensprechenden Werte dann zuweisen:
Javascript: 
function change(image){
  var css_class, src_value;
  if(image.getAttribute('class') == 'small')){
    css_class = 'large';
    src_value = 'pic-large.jpg';
  }else{
    css_class = 'small';
    src_value = 'pic-small.jpg';
  }
  image.setAttribute("class", css_class);
  image.setAttribute("src", src_value);
}
Ich hoffe ich konnte dir weiter helfen. :)
 
Zuletzt bearbeitet von einem Moderator:
  • Gefällt mir
Reaktionen: eee
Wunderbar, funktioniert perfekt und ist sehr verständlich, eine Klammer hast du allerdings zu viel ;) Hier nun die finale Version:

HTML: 
<html>
<head>
<style type="text/css">
img.small{padding:5px; border:black solid thin}
img.large{padding:10px; border:black solid thin; background-color:gray; position:fixed; z-index:1}
</style>
</head>
<body>

<img class="small" src="a_klein.png" alt="Vorschau" onClick="change(this)">


<script type="text/javascript">

function change(image){
  var css_class, src_value, alt_text;
  if(image.getAttribute('class') == 'small'){
    css_class = 'large';
    src_value = 'a_gross.png';
    alt_text = 'HQ';
  }else{
    css_class = 'small';
    src_value = 'a_klein.png';
    alt_text = 'Vorschau';
  }
  image.setAttribute("class", css_class);
  image.setAttribute("src", src_value);
  image.setAttribute("alt", alt_text);
}

</script>

</body>
</html>
 
Das freut mich! Die zusätzliche Klammer ist mir wohl so reingerutscht. Die kannst du behalten und verwenden, wenn du sie mal brauchst. ;-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück