Plaatjes laden niet goed

Status
Niet open voor verdere reacties.

Roeckie

Gebruiker
Lid geworden
7 jul 2009
Berichten
16
Goedemorgen,

Sinds kort een pagina gemaakt op een website met 6 blokken. Deze 6 blokken zijn allen 6 plaatjes met een mouse-over (dus 2 plaatjes per 1 blok).

Nu kom ik (tot nu toe) in Safari en Chrome het volgende tegen dat wanneer je (mobiel maar ook gewoon desktop) op 1 van de blokken klikt (zit een link achter), en vervolgens weer teruggaat (via 'Terug' in de browser),
het plaatje niet meer geladen wordt. Pas na een refresh wordt deze weer wel getoond. In Firefox en IE komt dit niet voor.

De code erachter is het volgende :
<div><a href="/dsresource?objectid=85034caa-9802-499f-ba41-92aa5d400cc9"><img onmouseout="src='https://cms-terneuzen.suite.green.gemnet.nl/dsresource?objectid=9c581ed0-a08a-4ab5-8c38-fd15ef7c54a5'" onmouseover="src='https://cms-terneuzen.suite.green.gemnet.nl/dsresource?objectid=f444d36e-583a-4d1b-b3d6-e5cef6cf4c4c'" src="/dsresource?objectid=9c581ed0-a08a-4ab5-8c38-fd15ef7c54a5&amp;&amp;disposition=inline" /></a></div>

Ik ben zeker geen grote HTML-kenner, dus ik hoop dat iemand mij wat wijzer kan maken waarom dit fout gaat en hoe ik dit kan oplossen.
Alvast bedankt.

Groet,
Merijn
 
Dit klopt ook niet lekker:

<img onmouseout="src='https://cms-terneuzen.suite.green.gemnet.nl/dsresource?objectid=9c581ed0-a08a-4ab5-8c38-fd15ef7c54a5'"

Als je een afbeelding wilt aanpassen aan de hand van een hover met de muis, raad ik CSS aan:

HTML code:
Code:
<div id="afbeelding"></div>

CSS-code:
Code:
#afbeelding{
   background-image: url('plaatje.png');
   height: 70px; // aanpassen
   width: 120px; // aanpassen
}

#afbeelding:hover {
   background-image: url('plaatje_hover.png');
}
 
Laatst bewerkt:
Omdat je CSS niet klopt. Kijk eens naar wat ik schreef....
 
Sorry, ik ben niet mee. Ik ben vrij nieuw hierin dus voor mij is een voor de hand liggend abc'tje zeker niet al te logisch.
Maar ik zie wel dat het anders is inderdaad, dacht dat hetgene tussen haakjes als voorbeeld diende ?

Dus url = link waar de afbeelding naartoe moet leiden, en tussen haakjes de specifieke afbeeldingslocatie ?
 
Jouw CSS mist de url(..) in de background-image eigenschap. In mijn CSS staat hij wel.
 
Hoi,

Bedankt voor de terugkoppeling. Ik heb nu het volgende :

<style type="text/css">

#afbeelding{
background-image: url(https://test-cms-terneuzen.suite.gr...jectid=80c6b7b9-6733-4f87-b125-92df76e0719a);
height: 70px; // aanpassen
width: 20px; // aanpassen
}

#afbeelding:hover {
background-image: url('plaatje_hover.png');
</style>

<div id="afbeelding">&nbsp;</div>

Nu komt de betreffende afbeelding naar voren, maar wel eindeloos naast elkaar. Enig idee hoe dit komt ? De betreffende afbeelding(slocatie) is echter maar één afbeelding..
 
Overigens doet ie dit bij elke afbeelding. Heb zomaar een link erin geplakt van een Google-afbeelding, ook deze wordt 'oneindig' vertoond ?
 
Klopt, gebruik dan de background-repeat: no-repeat; eigenschap.
 
Dankjewel. Had het zelf ook net gevonden. Laatste vraag, hopelijk kun je mij daarbij helpen:

Nu staat er een bepaalde width en height ingesteld, kan ik het ook zo instellen dat ie standaard de afmeting van de afbeelding pakt (de originele grootte) ?
 
Overigens ondervind ik nu het volgende via de Ipad / Chrome : wanneer ik op de gemaakte link klik van de afbeelding, en ik ga vervolgens weer terug via de browser, krijg ik gelijk de tweede afbeelding te zien (hover-image). Uiteraard is het de bedoeling dat de eerste afbeelding weer wordt getoond. Kan dit ?
 
Een hover wordt getoond als de muis eroverheen gaat. Op tablets heb je er weinig aan ;).

maar heb je anders een voorbeeld van je code? Eventueel ook in JSfiddle.
 
[JS]<style type="text/css">

#afbeelding{

background-image: url(http://www.ajax.nl/upload_mm/c/6/9/52936162-07d4-4214-85b8-ad362c561910_Ajaxlogo_nieuw_1066x600.png);
background-repeat: no-repeat;
height: 400px; // aanpassen
width: 100px; // aanpassen

}

#afbeelding:hover {
background-image: url(https://www.holland.com/upload_mm/c/2/3/21113_fullimage_Amsterdam-Brouwersgracht.jpg);
background-repeat: no-repeat;
</style>

<a href="www.ajax.nl"><div id="afbeelding">&nbsp;</div></a>[/JS]

In ons CMS kunnen we de CSS niet ergens anders apart invoeren, gaat in hetzelfde 'venster'. Ik heb nu zomaar 2 afbeeldingen genomen als voorbeeld om te testen.
Problemen/vragen tot nu dus:

> Kan ik iets zo instellen dat ie standaard de originele grootte pakt van de afbeelding ?
> Waarom ie na het doorklikken / en teruggaan, de tweede afbeelding pakt..
 
Als je het netjes wilt hebben, moet je uiteraard twee dezelfde formaten van de afbeelding hebben. Je kan dit ook met de height en width properties bepalen als het niet anders kan.

Ik heb even een JSfiddle aangemaakt, maar in Chrome op mijn computer zie ik geen afwijkende gebeurtenissen.
http://jsfiddle.net/khpx2e43/4/

Ik weet niet of je CMS achter SSL zit, en via https:// bereikbaar is, maar dan moet je altijd ook je afbeeldingen via https laden.
Zomaar even een tipje ;)
 
Laatst bewerkt:
Hi, dan zet ik er ook een voobeeld bij
Code:
<div class="img-mouse">
  <a href="/dsresource?objectid=85034caa-9802-499f-ba41-92aa5d400cc9">
    <img src="http://placecorgi.com/700/500?index=1" alt="" />
    <img src="http://placecorgi.com/700/500?index=2" alt="" />
  </a>
</div>

.img-mouse a, .img-mouse a:hover,
.img-mouse a:focus, .img-mouse a:active {
  position: relative;
  display: block;
  text-decoration: none;
}
.img-mouse img {
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: auto;
  border: 0;
}
.img-mouse a:hover  img:last-child,
.img-mouse a:active img:last-child {
  display: none;
}

Overigens ondervind ik nu het volgende via de Ipad / Chrome : wanneer ik op de gemaakte link klik van de afbeelding, en ik ga vervolgens weer terug via de browser, krijg ik gelijk de tweede afbeelding te zien (hover-image).
Dit komt waarschijnlijk omdat het de focus heeft

Suc6 met je website.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan