Javascript image 'locken'

[Martin11468]

Hallo,

Voor een site maak ik gebruik van een jQuery plugin die er voor zorgt dat grote afbeeldingen gebruikt kunnen worden als fullscreen achtergronden die zich schalen naar de resolutie van je scherm.

Omdat het normale afbeeldingen tussen image tags zijn, en niet in een stylesheet, kun je ze met een muisklik selecteren en verslepen. Bij sommige browsers resulteert dit in een blauwe waas over de achtergrond, en dit is hinderlijk voor de gebruiker.

Is er een mogelijkheid waarbij ik via javascript de image kan 'locken' om ervoor te zorgen dat deze niet geselecteerd kan worden?

Hier heb ik al op gegoogeld maar dat heeft me niet veel wijzer gemaakt.

Alvast bedankt voor jullie hulp!

[RobIII]

Ik zal wel iets missen, maar waarom gebruik je dan een image en geen background-image?

[ZpAz]

RobIII schreef op vrijdag 16 oktober 2009 @ 11:41:
Ik zal wel iets missen, maar waarom gebruik je dan een image en geen background-image?

Zodat het plaatje op de achtergrond schaalt met het venster.

Iets wat ook met enkel CSS is op te lossen zoals hier bijvoorbeeld: http://tinyurl.com/yg7my3m

Idee is dan om een normaal plaatje absoluut te positioneren, met een top en left van 0, en een width en height van 100% (en een lage z-index) uiteraard.

[ Voor 6% gewijzigd door ZpAz op 16-10-2009 12:38 ]

[crisp]

Voor Firefox:

Cascading Stylesheet:

-moz-user-select: none;

voor andere browsers moet je het ondragstart event cancellen

[R4gnax]

ZpAz schreef op vrijdag 16 oktober 2009 @ 12:37:
[...]


Zodat het plaatje op de achtergrond schaalt met het venster.

... Wat foeilelijk is.

[NMe]

R4gnax schreef op vrijdag 16 oktober 2009 @ 17:24:
[...]

... Wat foeilelijk is.

...wat precies is wat de topicstarter vraagt dus of jij het nou foeilelijk vindt of niet is niet zo relevant.

[HuHu]

NMe schreef op vrijdag 16 oktober 2009 @ 17:29:
[...]

...wat precies is wat de topicstarter vraagt dus of jij het nou foeilelijk vindt of niet is niet zo relevant.

Ach... soms is het niet verkeerd om de topicstarter te wijzen op iets wat foeilelijk of stom is, zoals bij variabele variabelenamen bijvoorbeeld.

[NMe]

HuHu schreef op vrijdag 16 oktober 2009 @ 19:22:
[...]

Ach... soms is het niet verkeerd om de topicstarter te wijzen op iets wat foeilelijk of stom is, zoals bij variabele variabelenamen bijvoorbeeld.

Voor een ontwerpfout is dat geen probleem inderdaad, maar dit is gewoon een vereiste binnen het grafisch design. Dat kun je dan wel lelijk denken te vinden maar voor hetzelfde geld past het misschien wel prima in de toepassing en dus valt daar niet veel over te zeggen.

offtopic:
Een beetje lullig dat je dat topic erbij haalt, want volgens mij begreep je gewoon structureel niet wat de topicstarter wilde daar; hij wilde eigenlijk gewoon een nieuwe persoon aanmaken met die naam, dus Persoon x = new Persoon(namen[0]);

[R4gnax]

NMe schreef op vrijdag 16 oktober 2009 @ 19:44:
[...]

Voor een ontwerpfout is dat geen probleem inderdaad, maar dit is gewoon een vereiste binnen het grafisch design. Dat kun je dan wel lelijk denken te vinden maar voor hetzelfde geld past het misschien wel prima in de toepassing en dus valt daar niet veel over te zeggen.

Hij wil een achtergrondplaatje naar de volledige beeldscherm resolutie geschaald hebben. Dat is letterlijk wat er staat. Hoeveel verschillende applicaties kun je daar nou precies voor verzinnen, waar de visuele kwaliteit van het plaatje niet belangrijk is?

Slideshows? Lijkt me toch vrij belangrijk...
Foto gallerij? Idem dito.
etc.

Het is geen mening maar een vrij objectief feit dat een plaatje wat geschaald wordt met de nearest neighbor methode (en dat is geloof ik toch nog steeds wat browsers gebruiken) er gewoon foeilelijk uitziet. Punt.

Wil je dit probleem een beetje netjes oplossen dan moet je verschillende standaard vergrotingsfactoren van je plaatje aanbieden. Bij een te grote afwijking tussen fysieke en afgebeelde grootte van het plaatje moet de client browser van de server een nieuw gegenereerd plaatje ophalen. De server kan dat perfect passend maken door het eerstvolgende grotere formaat te downsamplen (met ten minste bilinear filtering).

Als je dat in een resize event doet zul je slechts eventjes de verpixelde achtergrond zien, totdat het nieuwe plaatje ingeladen is (via javascript aub, en niet door direct het src attribuut van de img tag te wijzigen) en uitgewisseld kan worden met het afgebeelde plaatje.

[posttoast]

ZpAz schreef op vrijdag 16 oktober 2009 @ 12:37:
[...]


Zodat het plaatje op de achtergrond schaalt met het venster.

Iets wat ook met enkel CSS is op te lossen zoals hier bijvoorbeeld: http://tinyurl.com/yg7my3m

Idee is dan om een normaal plaatje absoluut te positioneren, met een top en left van 0, en een width en height van 100% (en een lage z-index) uiteraard.

Dat is een mooie CSS oplossing, maar: hij houdt niet de aspect-ratio van het plaatje aan.

[frickY]

Je zou het onselect-event moeten kunnen cancellen.

code:

<img onselect="return false;" onmousedown="return false" src="x">

[Martin11468]

Dank jullie wel voor deze reacties, hier ga ik deze week zeker mee aan de slag.

Of de site lelijk is mogen jullie zelf bepalen, hier staat een linkje online.

Klik!

de achtergrond van deze site wordt inderdaad via Javascript geschaald naar het juiste formaat van de browser, De image is standaard vrij groot ( 1600 x 1200 px ). Om het smooth'nd'sexy te laten verlopen wordt de achtergrond ingeladen met een fade in.

[Tom]

R4gnax schreef op vrijdag 16 oktober 2009 @ 17:24:
[...]


... Wat foeilelijk is.

Mee eens, maar tegenwoordig doen browsers het wel iets beter dan vroeger (toen het een pixelbende werd). Niet dat dat reden is om het wel te gebruiken