[CSS] Transparante achtergrond - Softwareontwikkeling

maandag 10 januari 2005 14:53

Acties:

Topicstarter

Ok, de eerste keer dat ik ergens zelf niet uitkom. Om eerlijk te zijn betwijfel ik dus een beetje of jullie me kunnen helpen, maar ik schat het Tweaker-niveau hoog genoeg in dat er andere oplossingen verzonnen kunnen worden

Ik heb een webpagina, met als achtergrond een foto.
Ergens in het midden van deze foto staat een DIV gepositioneerd.
Nu wil ik dat de foto volledig afgedekt is, behalve op de plek waar de DIV staat. Deze dient dus als soort mask

Uiteindelijk doel is dat deze DIV dmv javascript heen en weer geschoven, en groter of kleiner, kan worden, waardoor je zo over de hele foto kan 'lopen'.

Ik krjig het echter niet voor elkaar om met 1 andere div de volledige foto af te dekken, en met mijn vierkante in het midden staande div toch nog de foto te zien.
Ik kan wel 4 andere divs om mijn div heen plaatsen welke de foto afdekken, en deze mee verplaatsen, of sizen, aan de hand van mijn middelste div.. maar dat vind ik geen nette oplossing.

Iemand een beter idee?

edit:

HEMA doet het ook zo, met omliggende DIVs die mee worden geschaalt;
Afbeeldingslocatie: http://members.chello.nl/eprui/imagecut.png

T werkt wel, maar vind het een beetje overkill.

[ Voor 10% gewijzigd door frickY op 10-01-2005 14:57 ]

maandag 10 januari 2005 15:01

Acties:

BtM909

Watch out Guys...

Waarom doe je het niet anders?

Wat je eigenlijk moet doen

:
- in die kleinere div de image ook als background gebruiken, waarbij je de background position x en y kan verplaatsen tijdens het draggen van je div.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 10 januari 2005 15:03

Acties:

frickY

Topicstarter

Kijk, dat klinkt als een goed alternatief. Hoe kom je erop

Kan zo snel geen nadelen verzinnen...tis nog vrij simpel ook.. thanks!!

edit:

Werkt perfect! Echt heel erg bedankt!
Stomme is dat ik dit idee vorig jaar nog heb gebruikt in een Flash-ding, om een vergootglas te simuleren

nee nee, herstel.
Wanneer je IE zo instelt dat hij "bij ieder bezoek aan een pagina" de tijdelijke bestanden ververst, oftewel altijd alle afbeeldingen opnieuw laad, herlaad hij elke keer dat je de kleine DIV veranderd de foto. Hierdoor bevat deze kleine DIV telkens 1 a 2 seconden de achtergrond van de div erachter... niet de bedoeling.
Dit herladen komt waarschijnlijk doordat ik het volgende gebruik om de foto in de kleine DIV te verschuiven;

code:

1	sBox.style.background = '-' + sBox_vars['sBox_Xpos'].value + "px -" + sBox_vars['sBox_Ypos'].value + "px url('foto.jpg')";

Wat bijvoorbeeld geeft; "-101px -210px url('foto.jpg').

Wat ik ook probeer, hij blijft het achtergrondje van de DIV herladen wanneer deze wordt verplaatst. Ook als ik bovenstaand commando weglaat, en dus alleen de foto 1x set in het CSS.

Raad?

[ Voor 144% gewijzigd door frickY op 10-01-2005 15:29 ]

maandag 10 januari 2005 15:28

Acties:

Verwijderd

Zou je dat niet met een fixed background image kunnen regelen?

/me gaat even wat experimenteren met CSS

maandag 10 januari 2005 15:30

Acties:

frickY

Topicstarter

Hoe zie je dat voor je?
Een fixed background is mijns inziens niets anders dan een achtergrondje die blifjt staan terwijl jij scrollt.

pré is overigens dat het in zowel IE als Firefox werkt

Wanneer zou je overigens style="background: transparent" gebruiken?? Dat lijkt namelijk niets uit te halen, behalve dat het object de kleur van zijn parent neemt.. maar dat doet ie ook als je de background niet set

[ Voor 37% gewijzigd door frickY op 10-01-2005 15:32 ]

maandag 10 januari 2005 15:40

Acties:

Verwijderd

frickY schreef op maandag 10 januari 2005 @ 15:30:
Hoe zie je dat voor je?

Nou, zo. De volgende code werkt echter niet in IE (wel in Firefox).

code:

<html>
<head>
<style>
#the {
  background-image: url(http://www.ebibleteacher.com/backgrnd/purple%20winds.jpg);
  background-attachment: fixed;
  position: absolute;
  left: 100px;
  top: 150px;
  width: 500px;
  height: 200px;
}
</style>
<script>
function hitme() {
  var theDiv = document.getElementById("the");
  theDiv.style.left = 300;
}
</script>
</head>
<body>
<a href="javascript:hitme();">Hit me!</a>
<div id="the"></div>
</body>
</html>

maandag 10 januari 2005 15:44

Acties:

frickY

Topicstarter

Ook hierbij wordt de afbeelding opnieuw ingeladen als je op de knop klikt. En bij een foto van 100kb geeft dat toch erg irritante flitsen.. helemaal als je nagaat dat mijn 'kleine div' met je muis meebeweegt.. en de foto bij elke muisbeweging opnieuw wordt geladen

maandag 10 januari 2005 15:48

Acties:

BtM909

Watch out Guys...

Heb je wellicht wat aan deze gestripte (en gestolen) functie van de GoT Tracker van crisp:

code:

function adjustbackground(adjust, adjustX, adjustY) {

  if (adjust) {

    var X = window.screenX || window.screenLeft;
    var Y = window.screenY || window.screenTop;
    X = -X+adjustX;
    Y = -Y+adjustY;
    if (X != bgLeft || Y != bgTop) {
      document.body.style.backgroundPosition = X+'px '+Y+'px';
      bgLeft = X;
      bgTop = Y;
    }

  } else if (bgLeft != null) {

    document.body.style.backgroundPosition = '';
    bgLeft = null;
    bgTop = null;

  }

}

adjust is in dit geval een boolean, die je true moet geven

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 10 januari 2005 15:51

Acties:

frickY

Topicstarter

Voor de positioneren van de foto zou dat prima moeten zijn, maar dat werkte al. Probleem is dat de foto opnieuw wordt ingeladen zodra de afmetingen of de positie van de DIV waarin deze staat veranderen. Vrees dat ik dus toch een andere oplossing moet zoeken...

maandag 10 januari 2005 16:03

Acties:

BtM909

Watch out Guys...

frickY schreef op maandag 10 januari 2005 @ 15:51:
Voor de positioneren van de foto zou dat prima moeten zijn, maar dat werkte al. Probleem is dat de foto opnieuw wordt ingeladen zodra de afmetingen of de positie van de DIV waarin deze staat veranderen. Vrees dat ik dus toch een andere oplossing moet zoeken...

Da's de bekende background flicker bug. Kan je niet gewoon een image gebruiken in de div, ipv background image?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 10 januari 2005 16:05

Acties:

frickY

Topicstarter

Dacht handig te zijn en dan maar met 4 omliggende DIV's te werken die mee-sizen.. maar die geven natuurlijk dezelfde flicker-shit

Een gewone image zou handig zijn, als ik geen andere items in mn kleine DIV had staan, zoals tekst en andere afbeeldingen.

edit:

Firefox doet het wel prima, zonder flickers. Kut IE...
Firefox maakt alleen een fout bij het positioneren. Hij plaatst hem op zowel dd X als Y as ruim 10 pixels te dichtbij.

Nog andere ideeën om dit op te lossen?

[ Voor 84% gewijzigd door frickY op 10-01-2005 16:26 ]

maandag 10 januari 2005 20:46

Acties:

MTWZZ

One life, live it!

Ik heb net zelf even wat zitten prutsen en ik heb het opgelost door de achtergrond van de "window" div te laten verspringen.
Voorbeeld:

HTML:

<div class="container" onclick="move(event,'window')">
    <div class="window" id="window"></div>
    <div class="picture" id="picture"></div>
</div>

div "container" bevat alles, div "picture" bevat een full-size afbeelding, div "window" is het gehighlighte stuk van de foto.
Door middel van wat JavaScript kun je de muis positie vangen en daarmee de CSS background property van de "window" div aanpassen zodat de background die in "window" staat precies hetzelfde is als die in "picture" op dezelfde locatie maar dan zonder de alpha blend.

JavaScript:

1	o.style.background = "url('achtergrond.jpg') -"+bgx+"px -"+bgy+"px";

bgx en bgy zijn de berekende waarden afgeleid van de muis positie.
Affijn, een "View source" laat het beter zien. Beetje teveel code om hier te posten.

Live demo: http://dev.barad-dur.nl/pictureframe/

Nu met Land Rover Series 3 en Defender 90

dinsdag 11 januari 2005 12:18

Acties:

frickY

Topicstarter

Netjes, maar geeft precies dezelfde flicker-bug in IE.

dinsdag 11 januari 2005 16:05

Acties:

MTWZZ

One life, live it!

Ja dat heb ik gezien ja. Overgens staat er hier een mogelijke oplossing die ik nu even ga proberen.

Als je de settings uit dat artikel in een .htaccess plaatst werkt het perfect.
Update:
Het werkt alleen als de cache setting in IE op "Automatisch" of later staat, als ie op "elke keer controleren" staat werkt het nog niet.

Overgens heb ik nog geprobeerd om ipv de hele background property aan te passen dit alleen met o.style.backgroundPosition te doen maar dat werkte helaas niet.

[ Voor 62% gewijzigd door MTWZZ op 11-01-2005 20:19 . Reden: Oplossing ]

Nu met Land Rover Series 3 en Defender 90

woensdag 12 januari 2005 09:17

Acties:

frickY

Topicstarter

Nee dat had ik ook al geprobeerd

Wanneer de setting op Automatisch staat, werkt bovenstaande wel.
Het probleem is juist dat het niet werkt bij "Elk bezoek aan een pagina". En de meer ervaren pc gebruikers, die toch nog op IE zijn blijven hangen, hebben hem over het algemeen op Automatisch staan.

zaterdag 12 maart 2005 14:28

Acties:

MTWZZ

One life, live it!

Beetje laat om dit topic te reanimeren maar dit is misschien handig voor iemand die hier het antwoord op zoekt:
In tegenstelling tot een div te gebruiken en de achtergrond aan te passen heb ik dit vervangen door div's met img tags erin.
Nu blijft het image hetzelfde (geen reload, geen geknipper) maar wordt alleen de positie aangepast. Het mooie is dat dit voor IE ook werkt met welke cache-setting dan ook

nogmaals de link: klik versie en mousemove versie

Nu met Land Rover Series 3 en Defender 90