Menü
Aktuelles

Javascript - Banneranpassung

Lazerus

Lazerus

Gottheit
Also wenns die falsche Fore ist... bitte verschieben (hab aber keine andere gesehen)

Hab da ein Problem, ich wollte das sich der Banner oben auf meiner HP sich der auflösung des jewaligen pcs anpasst, ich dacht zu erst auf html grössen angabe in %, aber das wird ziemlich pixellich die sache, dan hab ich nach einer anderen möglichkeit gesucht und das mit dem javascript erfahren:
Code: 
Auf Anhieb fällt mir da nur eine Javascript-Lösung ein. Du könntest mit screen.width bzw. screen.height die aktuelle Bildschirmauflösung abfragen, und entsprechend die Parameter des Bildes (src, height, width) ändern

in etwa:

<html>
<head>
...
<script type="text/javascript")>
function resizeImage(){
if (screen.width==800){
  document.getElementById("bild1").src="/images/bild800.jpg";
  document.getElementById("bild1").width="500";
  document.getElementById("bild1").height="300";
}
}
</script>
...
</head>
<body onload="resizeImage();">
...
<img id="bild1" src="/images/bild1024.jpg" width="900" height="500">
...
</body>
</html>
da ich noch nich so mit erfahrung habe sehe ich da irgendwie nichts (heisst ich kapiers nich :( )
Könnte mir das jemand erklähren?
Also wie ich im code sehe wird es das bild nur auf die entsprechende grösse verkleinert/vergrössert aber bleibt da nicht der gleiche browser der das resizen nich so richtig kann und das bild dan pixellich erscheint?
Und irgendwo hab ich auch aufgeschnappt (weiss jetzt nich mehr wo) ein javascript der die function hat:
Bildschirmauflösung abfragen > dazu passendes bild laden
also das ich den banner für jede auflössung mache (1280, 1024, 800) und das dan entsprechend verlinke (kann sein das es der code ist der da oben ^^)
also bin für jeden rat dankbar...
 
Unknown2013

Unknown2013

~ Desu! Desu! Desu! ~
VIP
Ok bin auch nicht wirklich Fähig in Java aber meine Logik sagt mir folgendes:

Code: 
function resizeImage(){
if (screen.width==800){
  document.getElementById("bild1").src="/images/bild800.jpg";
  document.getElementById("bild1").width="500";
  document.getElementById("bild1").height="300";
}
}
Hier setzt du die einzelnen Bilder. Sprich die Version für 800,1024,1280,...
Sprich Code würde dann so aussehen.

Code: 
function resizeImage(){
if (screen.width==800){
  document.getElementById("bild1").src="/images/bild800.jpg";
  document.getElementById("bild1").width="500";
  document.getElementById("bild1").height="300";
}
if (screen.width==1024){
  document.getElementById("bild1").src="/images/bild1024.jpg";
  document.getElementById("bild1").width="600";
  document.getElementById("bild1").height="400";
}
if (screen.width==1280){
  document.getElementById("bild1").src="/images/bild1280.jpg";
  document.getElementById("bild1").width="700";
  document.getElementById("bild1").height="500";
}
}
Einbinden müsstes du das Bild dann mit:

Code: 
<img id="bild1">
Garantieren das es so funktioniert kann ich nicht. Wie gesagt ist nur ne Vermutung. Aber wenn man ein bisschen logisch denkt, müsste es so richtig sein.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben