plaatje tekst over.

Status
Niet open voor verdere reacties.
kipeke10

kipeke10

Gebruiker
Lid geworden
25 jan 2009
Berichten
90
Hallo, Hoe krijg ik over een plaatje een tekst? Zonder het met photoshop er over heen te gaan zetten?

Kan iemand het toepassen op de volgende code :
Code: 
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Menu1','','images/menu_2.png',1)">
				<img src="images/menu_1.png" alt="Menu1" name="Menu1" width="131" height="35" border="0" id="Menu1" /></a>

Hopelijk kan iemand me helpen zodat ik over deze code een tekst krijg, Maar dat de mouseover functie nog wel werkt.

Mvg, Kip
 
Ikke :cool:

Poging:

Code: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Wednesday, February 17, 2010 18:43:51 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  content="korte beschrijving van de pagina">
<meta name="keywords"  content="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" content="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #000;
background: #ffffcc;
}
.tekst
{
position: relative;
left: -100px;
top: -15px;
</style>


</head>

<body >

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Menu1','','images/menu_2.png',1)">
		<img src="images/menu_1.png" alt="Menu1" name="Menu1" width="131" height="35" border="0" id="Menu1" />
<span class="tekst" >Klik hier</span></a>

</body>

</html>

of het voldoet, is nog maar de vraag.

:cool:
 
peter vazed zei:
Ikke :cool:

Poging:

Code: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Wednesday, February 17, 2010 18:43:51 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  content="korte beschrijving van de pagina">
<meta name="keywords"  content="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" content="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #000;
background: #ffffcc;
}
.tekst
{
position: relative;
left: -100px;
top: -15px;
</style>


</head>

<body >

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Menu1','','images/menu_2.png',1)">
		<img src="images/menu_1.png" alt="Menu1" name="Menu1" width="131" height="35" border="0" id="Menu1" />
<span class="tekst" >Klik hier</span></a>

</body>

</html>

of het voldoet, is nog maar de vraag.

:cool:
Klik om te vergroten...


ik ga het proberen..

EDIT: Helaas.. De tekst komt alsnog naast het plaatje ;(
 
Laatst bewerkt:
text los in photoshop en die er als een ander afbeelding overheen latenvallen
 
Da's dan pech hebben, zal dus niet gaan werken.
Dus toch tekst zetten op de buttons met bv irfanview.

:cool:
 
Als ik het goed zie, gaat het om 'n afbeelding die moet worden vervangen door 'n andere als je erover hovert.
Kun je die afbeelding niet gewoon als achtergrond in de link neerzetten? Dan kan de tekst gewoon in de link. Bij hoveren vervang je dan de achtergrond. De tekst kun je opmaken zoals je wilt.
Hoveren werkt per definitie alleen op het bovenste element, dus als je tekst over 'n knop zet, zal hoveren over die knop niet meer werken.
Bij deze link is de tekst gewoon normale, losse tekst. De verkleurende knop zit in de achtergrond. Is zoiets wat je zoekt, of zit ik helemaal mis?
http://css-voorbeelden.nl/menu/statisch/horizontaal/menu-008-home.html
 
Kun je die afbeelding niet gewoon als achtergrond in de link neerzetten? Dan kan de tekst gewoon in de link. Bij hoveren vervang je dan de achtergrond. De tekst kun je opmaken zoals je wilt.
Klik om te vergroten...

..........in de origineel door TS gegeven code zal het niet lukken, is een javascript van Dreamweaver.

Maar inderdaad, de CSS link is een fraai stukje CSS,
en dat werkt natuurlijk in alle browsers.

:cool:
 
Ach, da's jammer. Ik heb helemaal geen ervaring met Dreamweaver, maar ik begrijp dus dat je min of meer bent overgeleverd de scripts die Dreamweaver maakt?
 
Ik heb nu met photoshop de buttons bewerk, En het ziet er wel oke uit.

Bedankt allemaal voor jullie tijd.

Conclusie = Losse tekst over een Mouseoverplaatje is lastig, Fotoshop gaat makkelijker.

Mvg, Kip

(SLOTJE)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan