Archivlink: javarea.de Forum > JavaScript > Bild vergroessern oder verkleinern
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Bild vergroessern oder verkleinern
Pages: [1]
| geschrieben von Hawk am 25.03.2005 - 16:59 |
Hallo zusammen,
ich möchte gerne ein Bild vergroessern oder verkleinern, habe schon rum probiert und komme nicht weiter.
Hier das was ich ausprobiert habe:
<script language="JavaScript">
<!--
bild = new Image (150,150)
bild.src ="images/Bildpfad.jpg";
bild2 = new Image (80,80)
bild2.src ="images/Bildpfad.jpg";
function groesser() {
document.images.Bild.src = bild.src;;
}
function kleiner() {
document.images.Bild.src = bild2.src;;
}
//-->
</script>
<img src="images/Bildpfad.jpg" alt="" name="Bild"><br>
<a href="#" onclick="groesser()">Groesser</a><br><a href="#" onclick="kleiner()">Kleiner</a>
Es handelt sich immer um ein und die gleiche Grafik
|
| geschrieben von Hawk am 25.03.2005 - 18:38 |
Habe das Problem selber gelöst.
Hier meine Lösung:
Ich lese eine Select Box aus und übergebe die Werte:
<script language="JavaScript">
<!--
function groesse() {
auswahl = document.forms[0].f1.selectedIndex;
var hoehe = document.forms[0].f1.options[auswahl].value;
var breite = hoehe * 1;
document.images.bild.style.height = hoehe;
document.images.bild.style.width = breite;
}
//-->
</script>
<noscript></noscript>
</head>
<body>
<img src="images/Amy.jpg" alt="" id="bild" name="bild">
<form action="" method="" target="">
<select name="f1" size="1">
<option value="80">80
<option value="120">120
<option value="150">150
<option value="180">180
</select>
<input type="Button" value="zeige" onclick="groesse()"> |
| geschrieben von Hawk am 26.03.2005 - 11:33 |
Hallo zusammen,
habe noch eine Möglichkeit geschaffen um Bilder die nicht Quadratisch sind auch zu verkleinern oder zu vergroessern. Vielleicht hat noch jemand dazu Vorschläge was mann anders machen kann.
<script language="JavaScript">
<!--
function groesse() {
var hoehe = this.document.images.bild.height;;
var breite = this.document.images.bild.width;;
var zhoehe = (hoehe / 100) * 5;
var zbreite= (breite / 100) * 5;
document.images.bild.style.height = hoehe + zhoehe;
document.images.bild.style.width = breite + zbreite;
document.forms[0].Maße.value= +( breite + zhoehe)+ " x " +( hoehe + zhoehe) ;
}
function kleiner() {
var hoehe = this.document.images.bild.height;;
var breite = this.document.images.bild.width;;
var zhoehe = (hoehe / 100) * 5;
var zbreite= (breite / 100) * 5;
document.images.bild.style.height = hoehe - zhoehe;
document.images.bild.style.width = breite - zbreite;
document.forms[0].Maße.value= +( breite - zbreite) + " x " +( hoehe - zhoehe) ;
}
//-->
</script>
</head>
<body>
<form>
<input type="Button" value="Groesser" onclick="groesse()" style="width: 80">
<input type="Text" name="Maße" value="" size="15" maxlength="">
<input type="Button" value="Kleiner" onclick="kleiner()" style="width: 80">
</form>
<p>
<img src="images/masterschuss.jpg" alt="" id="bild" name="bild">
</body>
Das Bild ist 240 x 107 Pixel |
|