JScript za zamenjavo slike pri manjših resolucijah

4 naročniki

Na spletni strani bi želel avtomatično zamenjati logotip z manjšo sliko v primerih, ko imajo obiskovalci monitorje z manjšimi resolucijami.

Na netu ne najdem pravega primera, vem sicer da lahko dobim resolucijo z screen.width / screen.height, vendar ne najdem nekega primerne kode, ki bi potem poskrbela za zamenjavo slike.

Logotip je določen v CSS-ju (background)

Anybody?

Mogoče tole?
http://css-tricks.com/examples/ImageToBackgroundImage/

Al sem slep al kaj, samo ne vidim kako mi lahko zgornji primer pomaga pri moji težavi? :)

Yup, sem prehitro prebral :)

Da popravim napako, sem ti našel nekaj možnih rešitev: ;)
(PS: nisem res preverjal, ampak mogoče ti kaj pride v pomoč)
http://www.xs4all.nl/~mignone/Easy-JavaScripts/load%20images%20depending%20on%20clients%20resolution%28into%20spans%29.html

http://www.htmlcodetutorial.com/help/archive.php/ott2797__change-image-based-on-resolution.html

Tale bo verjetno najbolj simple:
http://www.webmasterworld.com/forum91/2601.htm

Ne vem, če sem v redu razumel, a sliko lahko zamenjaš v javascriptu na tak način:

mainPicDiv = document.getElementById('main_pic') ;
         if (mainPicDiv != null)
            mainPicDiv.src = pot_do_male_slikice ;

v html kodi nekje pa imaš: <img id="main_pic" ...

Osebno bi zadevo rešil z uporabo jQuery knjižnjice. Najbolj enostavno je, da si narediš recimo 3 classe v CSS datoteki (logoBig, logoNormal, logoSmall) in potem glede na resolucijo postaviš if, else if in else... in potem spreminjaš class. Število classov nastaviš po želji. Odvisno koliko različnih velikosti logotipov nameravaš imeti.

Če bi rad bolj podroben opis in kodo pa napiši in se bom malo bolj potrudil =)

Da malo natančneje razložim:

Imam tale HTML:

<h1 class="logo">
  <a href="index.php"></a>
</h1>

in pa CSS:

h1.logo > a {
  background:url("../images/logo.png") no-repeat scroll 0 0 transparent;
}

Kot je predlagal McDave, bi rabil narediti npr.

h1.logo_small > a {
  background:url("../images/logo_small.png") no-repeat scroll 0 0 transparent;
}
h1.logo_normal > a {
  background:url("../images/logo_normal.png") no-repeat scroll 0 0 transparent;
}
h1.logo_big > a {
  background:url("../images/logo_big.png") no-repeat scroll 0 0 transparent;
}

Potem pa pridemo do jQuery - McDave, bi bil zelo hvaležen če imaš kakšen primer implementacije pri roki :)

Hvala vsem!

Zakaj ne zmodificiraš tisto kodo, ki sem ti jo poslal?

<script type="text/javascript">
//<![CDATA[

var screen_height = screen.height;

function sniffer() {

if(screen_height == 768) {

change('foo','image768.jpg');
}

else if (screen_height == 1024) {

change('foo','image1024.jpg');
}

else {

change('foo','image600.jpg');
}
}

function change(id, image) {
document.getElementById(id).src=image;
}
onload=sniffer;

//]]>
</script>

<img id="foo" src="" alt=""/>

Res da v tem primeru spremeni link do fotografije, ampak saj lahko spremeniš tako, da ti spremeni ime elementa.

Vir: http://www.webmasterworld.com/forum91/2601.htm

Hvala, Lucifix, sploh nisem šel gledat te povezave, ker sem se napalil na jQuery - bom preveril in javim.