img:hover Google Chrome

[joeyzbg]

Hallo allemaal,
Ik ben sinds kort bezig met een website.
Alleen loop ik nu tegen een probleem aan voor mijn galerij.

Google chrome (en safari) negeren de "img:hover" div in de css.
in internet explorer werkt de galerij perfect,
maar in chrome gebeurt er niks als ik met mijn muis over de images ga.
Ik heb een tijdje gegoogled maar kan niks vinden waar ik wat aan heb.

Is er misschien een vervanger voor de Hover div,
Of weet iemand hoe ik kan regelen dat het met een klik werkt?

Dit is mijn css code voor de gallerij.
Met het rode stuk, heeft chrome volgens mij de moeite.
en zoals jullie zien heb ik geprobeerd het op meerdere manieren te declareren.

/* OPTIES VOOR GALERIJ */
.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
 
[COLOR="red"].thumbnails img:hover,
.thumbnails img a:hover,
.thumbnails img:hover a {
border: 4px solid #00ccff;
cursor:pointer;
display:inline;[/COLOR]

}
 
.preview img {
border: 4px solid #444;
padding: 1px;
height: 500px;
}

Dit is mijn html code

<div class="gallery" align="center">
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1" src="afbeeldingen/galerij/1.jpg"/>
<img onmouseover="preview.src=img2.src" id="img2" src="afbeeldingen/galerij/2.jpg"/>
<img onmouseover="preview.src=img3.src" id="img3" src="afbeeldingen/galerij/3.jpg"/>
<img onmouseover="preview.src=img4.src" id="img4" src="afbeeldingen/galerij/4.jpg"/>
<img onmouseover="preview.src=img5.src" id="img5" src="afbeeldingen/galerij/5.jpg"/>
<img onmouseover="preview.src=img6.src" id="img6" src="afbeeldingen/galerij/6.jpg"/>
<img onmouseover="preview.src=img7.src" id="img7" src="afbeeldingen/galerij/7.jpg"/>
<img onmouseover="preview.src=img8.src" id="img8" src="afbeeldingen/galerij/8.jpg"/>
</div><br/>

<div class="preview" align="center">
 <img id="preview" src="afbeeldingen/galerij/1.jpg"/>
</div>

Mvg Joey

 

[Ruty]

Er zijn 2 dingen die je kunt doen:

1. Zeggen van het werkt gewoon niet lekker op die webbrowsers en dat aangeven op je website (Dit doen de meeste)
2. Een appart CSS script maken voor de browsers die een apparte nodig hebben.

 

[joeyzbg]

Bedankt voor je antwoord,
Ik snap inderdaad dat ik een 2e css aan kan maken voor de andere browsers.
Dit is ook geen enkel probleem.

Mijn punt is dat ik niet weet Wat ik moet aanpassen om het werkend te krijgen.


~Joey

 

[That Guy]

Eh, ja, of je gaat voor de enige correcte optie, optie 3: maak het gewoon werkend in elke browser.



Als ik hier met Firefox en Chrome over de randjes ga worden ze gewoon blauw, maar bij IE blijft het grijs. Dus omgekeerd... heb je toevallig de complete code of een link naar een online demo?

Ohja, en de 2e en 3e selector (.thumbnails img a:hover en .thumbnails img:hover a) zijn nutteloos, want je hebt nergens een a-element in je code. Deze twee kunnen gewoon weg.

 

[joeyzbg]

Eh, ja, of je gaat voor de enige correcte optie, optie 3: maak het gewoon werkend in elke browser.



Als ik hier met Firefox en Chrome over de randjes ga worden ze gewoon blauw, maar bij IE blijft het grijs. Dus omgekeerd... heb je toevallig de complete code of een link naar een online demo?

Ik heb hier de link naar de officiele site:
http://good-meat.nl/nietvoordeep/index.html

Hij is alleen nog niet gereleased, dus zal hem niet te lang laten staan
Voordat de link op google komt.

EDIT:
Ik heb de "a hover" dingen weg gehaald.
Maar volgens diverse bronnen op google komt mijn probleem voor
Omdat google chrome de "Hover" tag niet (goed) ondersteunt.
Hiervoor werd als alternatief gegeven om dus die "a hover" te gebruiken
Wat na nader inzien dus niks uitmaakt.
Ik vraag mij af of er wel een andere mogelijkheid is,
Of dat die "Hover" veranderd kan worden door mouseclick ofzo.

Vandaar dat ik mijn probleem hier post,
Omdat hier professionals zitten en het antwoord nuttig kan zien voor andere personen
met een soortgelijk probleem.


Mvg Joey

 

[That Guy]

Oh. Ooooh. Nu snap ik daadwerkelijk je vraag; dit is geen CSS probleem, maar een Javascript probleem...



anyway, dit is wat Chrome geeft in het foutenconsole (ctrl+shift+J):

Uncaught TypeError: Cannot read property 'src' of undefined
(anonymous function)photos.html:57
onmouseover

Waarom? Omdat 'preview' geen variabele is. Je moet eerst een zgn. handle naar een element opslaan, voordat je het zomaar kan gebruiken. Hetzelfde geld voor alle andere aanroepen (img1, img2, etc).

Dit is een makkelijke oplossing:

<script>
function gaGroot(elem)
{
   document.getElementById('preview').src = elem.src;
}
</script>

de links maak je dan zo:

<img onmouseover="gaGroot(this);" src="afbeeldingen/galerij/1.jpg" />

De div en preview-img kan dan gewoon blijven staan. Stuk makkelijker denk ik zo.

 

[joeyzbg]

Oh. Ooooh. Nu snap ik daadwerkelijk je vraag; dit is geen CSS probleem, maar een Javascript probleem...



anyway, dit is wat Chrome geeft in het foutenconsole (ctrl+shift+J):



Waarom? Omdat 'preview' geen variabele is. Je moet eerst een zgn. handle naar een element opslaan, voordat je het zomaar kan gebruiken. Hetzelfde geld voor alle andere aanroepen (img1, img2, etc).

Dit is een makkelijke oplossing:

<script>
function gaGroot(elem)
{
   document.getElementById('preview').src = elem.src;
}
</script>

de links maak je dan zo:

<img onmouseover="gaGroot(this);" src="afbeeldingen/galerij/1.jpg" />

De div en preview-img kan dan gewoon blijven staan. Stuk makkelijker denk ik zo.

Wouw, bedankt voor je antwoord!
ik was daar zelf dus echt niet achter gekomen.

Het werkt nu, en ik ben je zeer dankbaar!


Mvg Joey

 

[joeyzbg]

Maar nu kom ik aan bij mijn volgende probleem.....
Het zorgen dat de website met alle resoluties werkt.
en ook in alle browsers.
Namelijk de image waar mijn tekst boven komt gaat half weg.
dit omdat alleen het gedeelte waar daarwerkelijk tekst op staat word weergegeven.
Dit is met een te hoge resolutie.
Ik het het zichtbaar gemaakt (Ja amateuristisch) door gewoon <br> in te voegen tot hij geheel zichtbaar is.

Met een lage resolutie steekt de tekst er juist weer heel ver uit.
Iemand een idee hoe ik ik deze proporties vast kan zetten?


Een linkje hoe het met browsers alleen al verschilt:
http://i39.tinypic.com/p6av4.jpg

Chrome ---> Internet explorer 9 ---> Firefox
Mvg Joey

 

[Ruty]

Dat moet je dan met het command center doen. Ik dacht dat <center>(tekst/plaatje)</center> wel werkde.

 

[joeyzbg]

Dat moet je dan met het command center doen. Ik dacht dat <center>(tekst/plaatje)</center> wel werkde.

Dat klopt inderdaad,
Maar ik doel erop dat
Als je een lagere resolutie hebt
Dat de afbeelding dan verschuift,
En met een hogere resolutie de afbeelding voor de helft weg is.

Center gebruik ik al en dat werkt gewoon goed.