hi hab da ma ne frage und zwar wie kann ich mit javascript meiner hp auf legalem wege erklären das sie bild_groß nehmen soll wenn die bildschirmbreite größer gleich 1280 px is und bild_klein wenn sie kleiner ist
ich hab schon viel selber probiert und weiß nicht mehr was ich noch machen soll
ich verwende keine css
mfg nick123
Warum kostenlos registrieren?
Nur als registriertes Mitglied hast Du vollen Zugriff auf alle Funktionen unserer Website. So kannst Du eigene Fragen stellen und hast die volle Übersicht über neue interessante Themen im Forum.
Jetzt kostenlos registrieren.
Login
bild größe an browser fenster anpassen
10 Beiträge • Seite 1 von 1
von nick123 am 06.02.2008, 16:31
is meine frage zu kompliziert oder zu einfach aber ich bin hier am verzweifeln und wüsste gern was los ist
- nick123
- Beiträge: 103
- Registriert: 08.03.2007, 21:59
von dragonl am 06.02.2008, 16:44
Hallo Nick,
deiner HTML-Seite kannst du es nicht sagen weil diese Keine Programmiersprach ist sondern "nur" eine Auszeichnungsspreche (HyperText Markup Language) und somit unfähig irgendwelche Endscheidungen zu treffen.
Aber mit Javascript kannst du ganz einfach auf die CSS-Eigenschaften deiner Elemente zugreifen und größtenteils auch ändern.
Wie du allerdings berücksichtigen kannst ob es sich um ein Bild im Hoch- oder Querformat handelt weiss ich auch nicht !
Sagmal, wäre es auch möglich das du von anfangan prozentuale Höhen- und Breitenangaben für das Bild verwendest ?
Gruß Dragonl
deiner HTML-Seite kannst du es nicht sagen weil diese Keine Programmiersprach ist sondern "nur" eine Auszeichnungsspreche (HyperText Markup Language) und somit unfähig irgendwelche Endscheidungen zu treffen.
Aber mit Javascript kannst du ganz einfach auf die CSS-Eigenschaften deiner Elemente zugreifen und größtenteils auch ändern.
- Code: Alles auswählen
<img src="bild.jpg" alt="ich nackig :-P" id="bildXY" name="bildXZ" style="width:10px; height:13px;">
<script type="text/javascript">
<!--
var bild = document.getElementById('bildXY');
bild.style.width = "500px";
bild.style.height = "550px";
// wenn es wirklich ohne CSS sein soll
var bild = document.bildXZ; // keine ahung ob die browserkompalibität gewährleistet ist
bild.width = 500;
bild.height = 550;
// und für den analystischen ablauf
var browserWidth = funkton zur browserfensterbreite auslesen (innerWidth und clientWidth)
var bild = document.getElementById('bildXY');
var newWidth =100;
var newHeight=120;
if(browserWidth > 1200){
newWidth =480;
newHeight=640;
}
bild.style.width = newWidth+"px";
bild.style.height = newHeight+"px";
-->
</script>
Wie du allerdings berücksichtigen kannst ob es sich um ein Bild im Hoch- oder Querformat handelt weiss ich auch nicht !
Sagmal, wäre es auch möglich das du von anfangan prozentuale Höhen- und Breitenangaben für das Bild verwendest ?
- Code: Alles auswählen
<img src="" alt="" style="width:80%">
Gruß Dragonl
- dragonl
- Beiträge: 373
- Registriert: 14.09.2004, 14:10
- Wohnort: Bremen
re
von nick123 am 06.02.2008, 18:07
ah danke ich hatte ja auch gesagt das mir vieleicht javascript hilft aber ich habe keine ahnung der soll auch nix prozentuales nehmen sondernin der heutigen zeit wäre mir java das liebste ich habe auch zwei bilder eins für >=1280x1024 und eins für <1280x1024 aber kann ich das mit deinem quelltwxt umsetzen
- nick123
- Beiträge: 103
- Registriert: 08.03.2007, 21:59
von dragonl am 06.02.2008, 19:41
Java ? Viel zu aufwändíng und das muss erstmal beim Besucher Installiert sein !
Ich habe dir da gerade mal ein einzelne HTML-Datei geschrieben, dazu benötigst du noch zwei Bilder (bild_a.jpg und bild_b.jpg) die im selbern Verzeichnis wie die Datei plaziert werden.
Ich habe es mit dem IE6, IE7 und FF2 getestet, andere Browser habe ich gerade nicht da.
Was mir so beim schreiben auffiel !!!
Alle User die eine größere Fensterbreite als 1200 haben müssen nun ZWEI Bilder laden !
Einmal das erste Bild das Standartmäßig angezeigt wird und dann noch mal das zweite größere Bild.
Das ist nicht gerade frundlich.
Mein Vorschlag wäre nun, das du nur ein Bild verwendest, eines das vom Format her zwischen den biden liegt.
Gruß Tobias
Es folgt: nick123.html
Ich habe dir da gerade mal ein einzelne HTML-Datei geschrieben, dazu benötigst du noch zwei Bilder (bild_a.jpg und bild_b.jpg) die im selbern Verzeichnis wie die Datei plaziert werden.
Ich habe es mit dem IE6, IE7 und FF2 getestet, andere Browser habe ich gerade nicht da.
Was mir so beim schreiben auffiel !!!
Alle User die eine größere Fensterbreite als 1200 haben müssen nun ZWEI Bilder laden !
Einmal das erste Bild das Standartmäßig angezeigt wird und dann noch mal das zweite größere Bild.
Das ist nicht gerade frundlich.
Mein Vorschlag wäre nun, das du nur ein Bild verwendest, eines das vom Format her zwischen den biden liegt.
Gruß Tobias
Es folgt: nick123.html
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hilfe für nick123</title>
</head>
<body>
<img src="./bild_a.jpg" alt="bildchen" width="133" height="100" id="bild_xy">
<script type="text/javascript">
<!--
var browserWidth = window.innerWidth; // fensterbreite holen
if(navigator.appName=="Microsoft Internet Explorer"){ // weil der IE window.innerWidth nicht kennt
browserWidth = document.body.clientWidth; // muessen wir ihm einen extra kuchen backen :(
}
if(browserWidth > 1200){ // wenn die fensterbreite groesser als 1200 ist
var bild = document.getElementById("bild_xy"); // suche das bild und speicher die objektreferens
bild.style.width = "665px"; // aendere die breite des bildes
bild.style.height = "500px"; // aendere die hoehe des bildes
bild.src = "./bild_b.jpg"; // aendere die src des bildes
}
-->
</script>
</body>
</html>
- dragonl
- Beiträge: 373
- Registriert: 14.09.2004, 14:10
- Wohnort: Bremen
nochma wegen der % angabe
von nick123 am 06.02.2008, 20:17
ich hab hier mal den Quelltext wie soll ich das und wo einfügen?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Absolut mittig</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" height="93%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><img src="Hintergründe/hg_1.jpg" usemap="#hg_1" alt="imagemap" style="border-style:none" />
<map id="hg_1" name="hg_1">
<area shape="rect" alt="Anregungen" coords="364,89,480,213" href="Anregungen.html" nohref title="Anregungen" />
<area shape="rect" alt="Unterricht" coords="104,199,244,310" href="Unterricht.html" nohref title="Unterricht" />
<area shape="rect" alt="Miss SMILE`S Koffer" coords="156,322,319,450" href="Koffer.html" nohref title="Miss SMILE`S Koffer" />
<area shape="rect" alt="Tippel Tappel Tour" coords="443,406,623,464" href="Tippel-Tappel-Tour.html" nohref title="Tippel Tappel Tour" />
<area shape="rect" alt="Kunterbunte Tasche" coords="710,275,924,406" href="Tasche.html" nohref title="Kunterbunte Tasche" />
<area shape="poly" alt="Werkstatt Kinderleicht" coords="691,32,838,39,774,184,625,185,655,68" href="Werkstadt.html" nohref title="Werkstatt Kinderleicht" />
</map></td>
</tr>
</table>
<img src="hg_1_2.JPG" width="1" height="1">
<img src="hg_gelb_Kontakt.JPG" width="1" height="1">
<img src="hg_gelb_Anregungen.JPG" width="1" height="1">
<img src="hg_gelb_koffer_2.JPG" width="1" height="1">
<img src="Insel/hg_gelb_Tasche.JPG" width="1" height="1">
<img src="hg_gelb_Tippel Tappel Tour.JPG" width="1" height="1">
<img src="hg_gelb_Unterricht.JPG" width="1" height="1">
<img src="hg_gelb_Werkstadt.JPG" width="1" height="1">
</body>
</html>
mfg nick123
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Absolut mittig</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" height="93%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><img src="Hintergründe/hg_1.jpg" usemap="#hg_1" alt="imagemap" style="border-style:none" />
<map id="hg_1" name="hg_1">
<area shape="rect" alt="Anregungen" coords="364,89,480,213" href="Anregungen.html" nohref title="Anregungen" />
<area shape="rect" alt="Unterricht" coords="104,199,244,310" href="Unterricht.html" nohref title="Unterricht" />
<area shape="rect" alt="Miss SMILE`S Koffer" coords="156,322,319,450" href="Koffer.html" nohref title="Miss SMILE`S Koffer" />
<area shape="rect" alt="Tippel Tappel Tour" coords="443,406,623,464" href="Tippel-Tappel-Tour.html" nohref title="Tippel Tappel Tour" />
<area shape="rect" alt="Kunterbunte Tasche" coords="710,275,924,406" href="Tasche.html" nohref title="Kunterbunte Tasche" />
<area shape="poly" alt="Werkstatt Kinderleicht" coords="691,32,838,39,774,184,625,185,655,68" href="Werkstadt.html" nohref title="Werkstatt Kinderleicht" />
</map></td>
</tr>
</table>
<img src="hg_1_2.JPG" width="1" height="1">
<img src="hg_gelb_Kontakt.JPG" width="1" height="1">
<img src="hg_gelb_Anregungen.JPG" width="1" height="1">
<img src="hg_gelb_koffer_2.JPG" width="1" height="1">
<img src="Insel/hg_gelb_Tasche.JPG" width="1" height="1">
<img src="hg_gelb_Tippel Tappel Tour.JPG" width="1" height="1">
<img src="hg_gelb_Unterricht.JPG" width="1" height="1">
<img src="hg_gelb_Werkstadt.JPG" width="1" height="1">
</body>
</html>
mfg nick123
- nick123
- Beiträge: 103
- Registriert: 08.03.2007, 21:59
von dragonl am 06.02.2008, 20:40
Freut mich das es dich so begeistert 
Die % setzt du da wo du es möchtest/brauchst, z.B: <img src="" alt="" width="50%">
Wenn du die Höhenangaben weg lässt, wird sie automatisch berechnet, also im passendem Verhältnis. Ich weiss jetzt allerdings nicht ob ds in allen Browsern funktioniert und ob das noch valides HTML ist, hab es jetzt nur schnell im FF2 getestet.
~Tobias
Die % setzt du da wo du es möchtest/brauchst, z.B: <img src="" alt="" width="50%">
Wenn du die Höhenangaben weg lässt, wird sie automatisch berechnet, also im passendem Verhältnis. Ich weiss jetzt allerdings nicht ob ds in allen Browsern funktioniert und ob das noch valides HTML ist, hab es jetzt nur schnell im FF2 getestet.
~Tobias
- dragonl
- Beiträge: 373
- Registriert: 14.09.2004, 14:10
- Wohnort: Bremen
von nick123 am 07.02.2008, 13:16
problem ich habe das jetz ausprobiert und stelle fest das meine imagemap welche auf allen seiten vorhanden ist nicht mehr funktioniert und auch meine valign geht nich mehr das is das eine das andere is kann man meinetwegen eine übertriebenkleine startseite machen in die ein scrippt eingebunden ist welches sagt wenn die auflösung so ist lade die seite wenn nich dann anders sozusagen 2x die komplette hp machen aber mit unterschiedlichen auflösungen die von der Startseite angesteuert werden
mfg nick123
und danke im vorraus
mfg nick123
und danke im vorraus
- nick123
- Beiträge: 103
- Registriert: 08.03.2007, 21:59
10 Beiträge • Seite 1 von 1
Ähnliche Themen
| Startseite beim Browser läßt sich nicht FESTlegen!!!??? Forum: Software-Hilfe Autor: ray81 Antworten: |
Hilfe!!! Windows – Dateischutz macht mir grosse Probleme Forum: Software-Hilfe Autor: +Sniper+ Antworten: |
UNERWÜNSCHTE POP-UP fenster öffnen sich Forum: Software-Hilfe Autor: Anonymous Antworten: |
Bild füllt den Monitor nicht aus - schwarze Randstreifen Forum: Hardware-Hilfe Autor: afpdm Antworten: |
Suche Aufnahme-Proggy von Bild und Ton!!! Forum: Software-Hilfe Autor: basto88 Antworten: |
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste