afbeelding vervangen door tekst on "hover"

Status
Niet open voor verdere reacties.
S

stevenvec

Nieuwe gebruiker
Lid geworden
5 feb 2007
Berichten
2
Op mijn website wil ik een afbeelding vervangen door een tekst als ik met de muis over de afbeelding ga. Op het moment heb ik dit voor elkaar gekregen door een afbeelding te maken waarbij het linker deel (150 px) bestaat uit de afbeelding en het rechter deel (ook 150 px) bestaat uit de achtergrondkleur van mijn site (zwart) met de tekst. Ga je nu met je muis over de afbeelding dan verschuift de afbeelding 150 px naar links en zie je het gedeelte van de afbeelding die de tekst bevat. Ik heb alleen nogal wat van deze linkjes op mijn site en daardoor wordt de css code vrij lang. Het kan zijn dat deze code nog versimpeld kan worden met hetzelfde effect, maar ik kan me ook voorstellen dat er een simpelere oplossing is voor hetzelfde probleem (bv tekst gewoon weergeven in de broncode van de site waardoor het niet nodig is een afbeelding met tekst te maken?
Hieronder een deel van de css code die ik nu gebruik:

#img1 a
{
display:block;
width:150px;
height:107px;
background: url(afbeelding1.jpg) 0 0 no-repeat;
}
#img2 a
{
display:block;
width:150px;
height:107px;
background: url(afbeelding2.jpg) 0 0 no-repeat;
}
#img3 a
{
display:block;
width:150px;
height:107px;
background: url(afbeelding3.jpg) 0 0 no-repeat;
}
enz...
#img1 a:hover
{
background-position: -150px 0;
}
#img2 a:hover
{
background-position: -150px 0;
}
enz....

en dan voor de afbeeldingen:
<div id="img1"><a href="#"></a></div>
enz...

Alvast bedank!
 
Verander de CSS code naar het volgende:

Code: 
#img a
{
display:block;
width:150px;
height:107px;
background-position: 0 0;
background-repeat: no-repeat;
}

#img a:hover
{
background-position: -150px 0;
}

Je kunt nu op de volgende manier verschillende afbeeldingen gebruiken:

HTML: 
<div id="img"><a href="#" style="background-image: url(afbeelding1.jpg);"></a></div>
<div id="img"><a href="#" style="background-image: url(afbeelding2.jpg);"></a></div>
<div id="img"><a href="#" style="background-image: url(afbeelding3.jpg);"></a></div>

Misschien kan het, zoals je al zei, ook op een andere manier, maar ik weet niet precies hoe dat werkt. Zo is het in ieder geval al een stuk makkelijker.
Ik heb de code trouwens niet getest, maar ik verwacht dat het wel werkt.
 
dit moet werken:

HTML: 
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

image1 = new Image();
image1.src = "link naar afbeelding met tekst";

// End -->
</script>
</HEAD>

<BODY>

<a href="mogelijke link als je klikt" onmouseover="image1.src='link naar afbeelding met tekst';"
onmouseout="image1.src='link naar afbeelding zonder tekst';">
<img name="image1" src="link naar afbeelding zonder tekst" border=0></a>

</BODY>

vervang dan de namen link naar dit of dat door de echte link.

ook een scriptje zonder het linken naar een andere pagina:

HTML: 
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

image1 = new Image();
image1.src = "link naar afbeelding met tekst";

// End -->
</script>
</HEAD>

<BODY>

<a href="mogelijke link als je klikt" onmouseover="image1.src='link naar afbeelding met tekst';"
onmouseout="image1.src='link naar afbeelding zonder tekst';">
<img name="image1" src="link naar afbeelding zonder tekst" border=0></a>

</BODY>

nog niet getest maar denk dat het werkt
 
Mijn dank is groot. Die css code is inderdaad een stuk eenvoudiger en werkt goed. Van javascript heb ik totaal geen verstand, dus daar zal ik me eerst wat verder in verdiepen. Tot die tijd bied css uitkomst. Nogmaals bedankt!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan