tekst op knop wijzigen

Status
Niet open voor verdere reacties.
B

B.Veuger

Gebruiker
Lid geworden
10 feb 2001
Berichten
960
Is het mogelijk om een tekst op een knop in een website te wijzigen?
Het is een gif afbeelding
 
Uhhhh.... je kunt het plaatje vervangen door een ander plaatje? :P

Je kunt niet met HTML op een plaatje schrijven. Het kan wel met PHP, maar dat is meer voor on-the-fly generatie. Als je een plaatje hebt met een tekst erop, kun je het beste gewoon een nieuw plaatje maken met de juiste tekst, en die uploaden over de oude heen.
 
Frats zei:
Uhhhh.... je kunt het plaatje vervangen door een ander plaatje? :P

Je kunt niet met HTML op een plaatje schrijven. Het kan wel met PHP, maar dat is meer voor on-the-fly generatie. Als je een plaatje hebt met een tekst erop, kun je het beste gewoon een nieuw plaatje maken met de juiste tekst, en die uploaden over de oude heen.
Klik om te vergroten...

Ik kan een nieuw plaatje maken, weet je een manier om achter het zelfde lettertype te komen?

in de bijlage saat een voorbeeld
 

Bijlagen

  • knhm1.gif
    knhm1.gif
    355 bytes · Weergaven: 25
Nee, ik denk niet dat er een manier is buiten goed zoeken.. :/

Het plaatje heeft daar geen informatie over nml, tenzij je er een Photoshop versie van hebt.
 
Met Paint kan je de tekst wel wijzigen, maar ik denk niet dat je dan het goede lettertypen krijgt.
 
Ik denk dat je best zelf een plaatje maakt met die twee driehoekjes en een tekst erbij. Je weet dan welk lettertype je gebruikt hebt en kan met datzelfde lettertype een nieuw plaatje maken met dezelfde grootte en een andere tekst. Dat plaatje kan je dan wel in de plaats van het eerste plaatje zetten.
Ik denk trouwens dat het een van de varianten van Arial is.
 
Hoi heer/dame B.Veuger,
Als het gaat om een serie knoppen die hetzelfde plaatje moeten krijgen maar verschillende opschriften, heb ik denkelijk een bruikbaar alternatief.
Je/u hebt aan 1 (één) plaatje genoeg: dit kan hergebruikt worden als je de tekst opneemt als html-tekst (en niet in het plaatje verwerkt). Alle opmaak van de letters (inclusief lettertype en letter-afstand) kan met css geregeld worden. Het is op deze manier ook heel eenvoudig om er een nieuwe "knop" bij te maken, als dat zo van pas komt: je hoeft niets te tekenen, maar alleen de nieuwe tekst in de html-code op te nemen. Verder niets: alles gaat vanzelf!
Succes!
Met vriendelijke groet,
CSShunter
 
Ik denk dat ik met dit antwoord wel wat zou kunnen, maar mijn kennis is niet groot op dit gebied, kunt u/jij mij uitleggen hoe ik precies te werk moet gaan?

ps u/jij mag je tegen mij zeggen/schrijven ik ben dhr Be Veuger
 
Hoi Be,
Ik denk dat ik wel wat meer kan vertellen, maar dan zijn eerst wat preciezere gegevens nodig over wat je precies wilt.
  • Heb je al een stukje site online staan, waar zo'n menu in moet komen? Dan graag een link daarnaartoe.
  • Of als je nog helemaal niets hebt, misschien een plaatje/tekeningetje van hoe het er ongeveer uit moet komen te zien?
  • En zou je het liefste het wissel-plaatje (van Knoptekst 3 uit het voorbeeld) gebruiken, of gewoon de driehoekjes hetzelfde willen laten als je er overheen gaat met de muis? Als je een keus voor 1 van de 2 hebt gemaakt, kan de css namelijk weer wat eenvoudiger worden. :)

Met vriendelijke groet,
CSShunter
(ook "je & jij")
 
De site staat online, het adres is www.allardschultink.nl en moet worden aangepast.
Het mooist is dat wanneer je met de muis over de tekst van de knoppen gaat deze oranje oplicht.
 
Aha, het is een horizontaal menu dat in een losse frame-pagina zit.

Daarmee hebben we te maken met de nadelen die aan frames zitten. Bv. om in het menu de op dat moment aan staande pagina een oranje kleur te geven, zit er een vre-se-lij-ke brok javascript in het menu - en is er niet één menu-pagina, maar zijn het er 8 verschillende. En daarmee is dan weer net het voordeel van een frame-opzet weer compleet teniet gedaan: hetzelfde menu op alle pagina's. Dreamweaver in de bocht? :shocked:
Mijn voorstel zou zijn: de afwijkende link-kleur van de aan staande pagina weglaten; het blijkt al genoeg uit de kop die boven elke pagina staat, welke pagina het is. *)

Als je op zo'n manier maar één menu voor alle pagina's gebruikt, dan laten we de <li>'s in mijn voorbeeld ook horizontaal worden, met de css {display:inline;}.
Daarmee wordt het:
(een bovenlijntje erbij bij de links leek me iets evenwichtiger / kan ook weg - zie broncode).
Als je nu:
dan zou je een heel eind moeten komen, denk ik.

Met vriendelijke groet,
CSShunter

*) Als alternatieven zie ik:
  • bij het menu in een frame een nieuw (eenvoudiger) javascript bedenken dat de css aanstuurt om de kleur in het menu automatisch te laten veranderen voor de aan staande pagina, of
  • hetzelfde menu inbouwen in elke pagina van het middenframe, en met css de kleur in het menu automatisch laten veranderen voor de aan staande pagina, of
  • het allermooiste: de hele frame-opzet van de site verlaten, en vervangen door een php + css site (dan zijn alle frame-nadelen verdwenen).
 
Ik denk dat je een goed advies geeft, maar ik ondervind toch problemen, ik heb jou voorbeeld gekopieerd naar mijn pc, en wanneer ik het dan open in frontpage heb ik de (knoppen) niet meer op een rij staan, maar onderelkaar en wanneer ik er met de muis overga komen de lijntjes niet onder en boven de tekst, wat doe ik fout?



csshunter zei:
Aha, het is een horizontaal menu dat in een losse frame-pagina zit.

Daarmee hebben we te maken met de nadelen die aan frames zitten. Bv. om in het menu de op dat moment aan staande pagina een oranje kleur te geven, zit er een vre-se-lij-ke brok javascript in het menu - en is er niet één menu-pagina, maar zijn het er 8 verschillende. En daarmee is dan weer net het voordeel van een frame-opzet weer compleet teniet gedaan: hetzelfde menu op alle pagina's. Dreamweaver in de bocht? :shocked:
Mijn voorstel zou zijn: de afwijkende link-kleur van de aan staande pagina weglaten; het blijkt al genoeg uit de kop die boven elke pagina staat, welke pagina het is. *)

Als je op zo'n manier maar één menu voor alle pagina's gebruikt, dan laten we de <li>'s in mijn voorbeeld ook horizontaal worden, met de css {display:inline;}.
Daarmee wordt het:
(een bovenlijntje erbij bij de links leek me iets evenwichtiger / kan ook weg - zie broncode).
Als je nu:
dan zou je een heel eind moeten komen, denk ik.

Met vriendelijke groet,
CSShunter

*) Als alternatieven zie ik:
  • bij het menu in een frame een nieuw (eenvoudiger) javascript bedenken dat de css aanstuurt om de kleur in het menu automatisch te laten veranderen voor de aan staande pagina, of
  • hetzelfde menu inbouwen in elke pagina van het middenframe, en met css de kleur in het menu automatisch laten veranderen voor de aan staande pagina, of
  • het allermooiste: de hele frame-opzet van de site verlaten, en vervangen door een php + css site (dan zijn alle frame-nadelen verdwenen).
Klik om te vergroten...
 
Ik weet niet of jij het bent die iets fout doet, of Frontpage! ;)
Bij mij (met een Frontpage 2003) zijn de verschijnselen als volgt:
  • In de "Ontwerpen" en in de "Splitsen" weergave van Frontpage komen de links inderdaad onder elkaar (en ook nog: gecentreerd in het midden, en met de achtergrond-plaatjes er dwars door heen).
  • Daar klopt dus helemaal niets van!
  • In de "Voorbeeld" weergave gaat het wel goed, en komen ook de oranje lijntjes tevoorschijn als je er over heen gaat.
  • Maar: ook de "Voorbeeld" weergave van Frontpage is lang niet altijd te vertrouwen! :(
Ik test daarom nieuwe pagina's altijd (via de Verkenner) "in het echt" met de browsers voor het surfen (Firefox, Internet Explorer, enz). Meestal is het openen/dubbelklikken op het html-bestand; en anders via de rechtermuisknop: "Openen als..." en dan de browser opzoeken.
Alle browsers kunnen n.l. ook html-pagina's bezichtigen die nog niet geupload zijn (als ze maar de uitgang .htm of .html hebben).

Of doet de pagina het ook niet goed in een echte browser? Zet in dat geval svp even een testpagina online, dan kunnen we even kijken waar het lek zit.

Met vriendelijke groet,
CSShunter

PS: Ken je het webbouw-programma Kompozer? Dat is een stuk beter dan Frontpage, en nog gratis ook. Frontpage is sterk verouderd, en levert vaak hele foute code...
 
Ik kom al iets verder met jou voorstel.
Wanneer ik op voorbeeld druk staan de links naast elkaar, maar wanneer ik er met de muisoverga zie ik nog geen oranje streepjes, en ook de driehoekjes krijg ik niet op hun plaats. kun je uitleggen hoe ik dat moet doen?






csshunter zei:
Ik weet niet of jij het bent die iets fout doet, of Frontpage! ;)
Bij mij (met een Frontpage 2003) zijn de verschijnselen als volgt:
  • In de "Ontwerpen" en in de "Splitsen" weergave van Frontpage komen de links inderdaad onder elkaar (en ook nog: gecentreerd in het midden, en met de achtergrond-plaatjes er dwars door heen).
  • Daar klopt dus helemaal niets van!
  • In de "Voorbeeld" weergave gaat het wel goed, en komen ook de oranje lijntjes tevoorschijn als je er over heen gaat.
  • Maar: ook de "Voorbeeld" weergave van Frontpage is lang niet altijd te vertrouwen! :(
Ik test daarom nieuwe pagina's altijd (via de Verkenner) "in het echt" met de browsers voor het surfen (Firefox, Internet Explorer, enz). Meestal is het openen/dubbelklikken op het html-bestand; en anders via de rechtermuisknop: "Openen als..." en dan de browser opzoeken.
Alle browsers kunnen n.l. ook html-pagina's bezichtigen die nog niet geupload zijn (als ze maar de uitgang .htm of .html hebben).

Of doet de pagina het ook niet goed in een echte browser? Zet in dat geval svp even een testpagina online, dan kunnen we even kijken waar het lek zit.

Met vriendelijke groet,
CSShunter

PS: Ken je het webbouw-programma Kompozer? Dat is een stuk beter dan Frontpage, en nog gratis ook. Frontpage is sterk verouderd, en levert vaak hele foute code...
Klik om te vergroten...
 
Hoi Be,
Prima dat je al een stuk in de richting komt!
... wanneer ik er met de muis over ga zie ik nog geen oranje streepjes, en ook de driehoekjes krijg ik niet op hun plaats. kun je uitleggen hoe ik dat moet doen?
Klik om te vergroten...
Waarschijnlijk wel, maar niet op goed geluk. Hiervandaan kan ik niet de code zien die je al hebt, en waar het aan kan liggen.
Dan weten alleen de volgers van dit onderwerp op het forum waar deze testpagina zit, en kunnen gewone bezoekers van de site er niet bij komen. Het verstoort dus niets aan de site. :)

En als dat gelukt is, kan je dan hier even een berichtje zetten? Dan kunnen we verder zien.

Met vriendelijke groet,
CSShunter
 
ik heb het testmenu geupload, ik hoop dat je me kunt helpen






csshunter zei:
Hoi Be,
Prima dat je al een stuk in de richting komt!

Waarschijnlijk wel, maar niet op goed geluk. Hiervandaan kan ik niet de code zien die je al hebt, en waar het aan kan liggen.
Dan weten alleen de volgers van dit onderwerp op het forum waar deze testpagina zit, en kunnen gewone bezoekers van de site er niet bij komen. Het verstoort dus niets aan de site. :)

En als dat gelukt is, kan je dan hier even een berichtje zetten? Dan kunnen we verder zien.

Met vriendelijke groet,
CSShunter
Klik om te vergroten...
 
Aha, ik denk dat er iets is misgegaan bij het uploaden, of dat ik me niet duidelijk genoeg heb uitgedrukt.
Uit de codes van je ge-uploade pagina kan ik namelijk niet een nieuwe menu-pagina halen, waarin de driehoekjes niet goed op hun plaats staan.

Eerst even wat ik bedoelde. Je was een nieuwe menu-pagina aan het maken, waarin het nog niet helemaal goed ging. Ik weet niet hoe je die genoemd hebt, maar die pagina bedoelde ik. D.w.z. als losse pagina, en niet als frameset of iets dergelijks.

Maar ik heb net geleerd dat Frontpage géén aparte webpagina's kan uploaden. En dan zal het met Frontpage niet goed kunnen lukken, als je die voor het uploaden gebruikt.
Dan gaan we het anders doen! :)

  1. Als je behalve Frontpage ook nog een apart FTP-programma hebt (zoals Filezilla), kun je je nieuwe menu-pagina daarmee uploaden.
  2. Als je dat niet hebt, moet je even de hele code van de pagina kopiëren (dus van <!DOCTYPE ...enz. tot en met </html>), en dan hier in een bericht inplakken. Na het inplakken de hele bubs even selecteren, en dan op de <> klikken:
code-in-bericht.gif
dan komt het hier mooi als html-code te staan.

Zou dat wel gaan?

Met vriendelijke groet,
CSShunter
 
Is dit wat je bedoeld?




HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu Schultink</title>

<style type="text/css">
body { 
	margin: 0; 
	padding: 10px 0;
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
	font-size: 100.1%;
	text-align: center;
	}
ul {
	margin: 0; 
	padding: 0;
	list-style: none;
	}
li {
	margin: 0;
	padding: 0;
	font-family: verdana, arial, "Trebuchet MS", sans-serif;
	font-size: .75em;
	font-weight: bold;
	letter-spacing: -0.05em;
	display: inline;
	}
a {
	display: inline-block;
	padding: 5px 0px 5px 28px;
	background: white url(images/minilogo-schultink.png) no-repeat 0 50%;
	color: black;
	text-decoration: none;
	}
/*  regel 34 hierboven moet worden: 
	background: white url(http://www.allardschultink.nl/img/minilogo-schultink.png) no-repeat 0 50%;
*/

a:hover span, a:focus span {
	padding: 1px 0 2px 0;
	color: #FF6600;
	background-color: white;
	border-top: 2px solid #FF6600;    /* bovenlijntje bij hover */
	border-bottom: 2px solid #FF6600;
	}
</style>

</head>

<body>
<ul>
	<li><a href="index.php"><span>Home</span></a></li>
	<li><a href="index.php"><span>Actueel</span></a></li>
	<li><a href="index.php"><span>Nieuwbouw</span></a></li>
	<li><a href="index.php"><span>Verbouw/Onderhoud</span></a></li>
	<li><a href="index.php"><span>Renovatie</span></a></li>
	<li><a href="index.php"><span>Kunststofkozijnen</span></a></li>
	<li><a href="index.php"><span>Historie</span></a></li>
	<li><a href="index.php"><span>Contact</span></a></li>
</ul>
</body>
</html>


csshunter zei:
Aha, ik denk dat er iets is misgegaan bij het uploaden, of dat ik me niet duidelijk genoeg heb uitgedrukt.
Uit de codes van je ge-uploade pagina kan ik namelijk niet een nieuwe menu-pagina halen, waarin de driehoekjes niet goed op hun plaats staan.

Eerst even wat ik bedoelde. Je was een nieuwe menu-pagina aan het maken, waarin het nog niet helemaal goed ging. Ik weet niet hoe je die genoemd hebt, maar die pagina bedoelde ik. D.w.z. als losse pagina, en niet als frameset of iets dergelijks.

Maar ik heb net geleerd dat Frontpage géén aparte webpagina's kan uploaden. En dan zal het met Frontpage niet goed kunnen lukken, als je die voor het uploaden gebruikt.
Dan gaan we het anders doen! :)

  1. Als je behalve Frontpage ook nog een apart FTP-programma hebt (zoals Filezilla), kun je je nieuwe menu-pagina daarmee uploaden.
  2. Als je dat niet hebt, moet je even de hele code van de pagina kopiëren (dus van <!DOCTYPE ...enz. tot en met </html>), en dan hier in een bericht inplakken. Na het inplakken de hele bubs even selecteren, en dan op de <> klikken:
code-in-bericht.gif
dan komt het hier mooi als html-code te staan.

Zou dat wel gaan?

Met vriendelijke groet,
CSShunter
Klik om te vergroten...
 
Ik ben er nog niet uit wie weet raad?


B.Veuger zei:
Is dit wat je bedoeld?




HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu Schultink</title>

<style type="text/css">
body { 
	margin: 0; 
	padding: 10px 0;
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
	font-size: 100.1%;
	text-align: center;
	}
ul {
	margin: 0; 
	padding: 0;
	list-style: none;
	}
li {
	margin: 0;
	padding: 0;
	font-family: verdana, arial, "Trebuchet MS", sans-serif;
	font-size: .75em;
	font-weight: bold;
	letter-spacing: -0.05em;
	display: inline;
	}
a {
	display: inline-block;
	padding: 5px 0px 5px 28px;
	background: white url(images/minilogo-schultink.png) no-repeat 0 50%;
	color: black;
	text-decoration: none;
	}
/*  regel 34 hierboven moet worden: 
	background: white url(http://www.allardschultink.nl/img/minilogo-schultink.png) no-repeat 0 50%;
*/

a:hover span, a:focus span {
	padding: 1px 0 2px 0;
	color: #FF6600;
	background-color: white;
	border-top: 2px solid #FF6600;    /* bovenlijntje bij hover */
	border-bottom: 2px solid #FF6600;
	}
</style>

</head>

<body>
<ul>
	<li><a href="index.php"><span>Home</span></a></li>
	<li><a href="index.php"><span>Actueel</span></a></li>
	<li><a href="index.php"><span>Nieuwbouw</span></a></li>
	<li><a href="index.php"><span>Verbouw/Onderhoud</span></a></li>
	<li><a href="index.php"><span>Renovatie</span></a></li>
	<li><a href="index.php"><span>Kunststofkozijnen</span></a></li>
	<li><a href="index.php"><span>Historie</span></a></li>
	<li><a href="index.php"><span>Contact</span></a></li>
</ul>
</body>
</html>
Klik om te vergroten...
 
Beste Be,
Ik heb de site nog eens diep in de ogen gekeken, en helaas gemerkt dat deze complexer in elkaar zit dan ik verwachtte.
Behalve dat de site uit frames is opgebouwd, hebben die frames een heel aparte manier van navigatie.
  • Om een aantal redenen wordt het gebruik van frames eigenlijk sowieso sterk afgeraden.
    O.a. problemen bij direct willen doorlinken, slechte toegankelijkheid, moeilijker vorm te geven, stuk slechtere vindbaarheid voor zoekmachines enz. Er bestaan tegenwoordig prima alternatieven voor, zonder de nadelen van frames.
  • Maar als je het originele -menuhome.htm bekijkt, dan zien we dat hierin voor de navigatie van het menu een speciaal javascript wordt gebruikt.
  • Zoiets zou dan ook in mijn opzet gebruikt moeten worden; waarschijnlijk met wat aanpassingen van het script.
  • Maar ook blijkt: het script en de bijbehorende html-code veroorzaakt ernstige html-fouten (45 stuks). Vermoedelijk is dat de reden dat soms het menu niet goed werkt. Bv. na bekijken van "actueel" blijft "actueel" oranje, terwijl je al op een heel andere pagina zit; dat komt daarna niet meer goed op alle andere vervolgpagina's.
  • Het vervelende is, dat het oorspronkelijke webbouw-programma (een oudere versie van Dreamweaver?) een navigatiescript gebruikt, dat teruggrijpt op de ongeldige html-codes. Dan zou het hele script herschreven moeten worden om de zaak ten goede te keren...
Conclusie.
Mijn suggestie blijkt in de gegeven omstandigheden moeilijk toepasbaar: sorry. :o
Om daar nu met enig kunst- en vliegwerk de "foute codes" aan toe te voegen, zal opleveren dat het menu nog steeds niet goed werkt, vrees ik. :confused:
Dat is spijtig!

Eigenlijk zou het 't beste zijn om de hele site vanaf de basis opnieuw te bouwen, want van het materiaal dat er in zit kan best iets heel moois gemaakt worden! :)

Niet met frames en scripts, maar met css en php. Het voordeel van frames (1 menu veranderen werkt door op alle pagina's van de site; steeds dezelfde kop, voet, enz.) blijft zo behouden, terwijl je van de nadelen af bent.
En het lijkt me eerlijk gezegd zonde van de tijd om nog veel werk te stoppen in het menu van de site in de huidige vorm.

Ik zal nog prakkiseren over een model dat voor de site gebruikt kan worden, waarmee ook de fotopagina's veel overzichtelijker worden; want dat moeten de klantentrekkers zijn!
Het kan eventjes duren, want ik wil ook wat dingen uittesten. Maar als ik iets heb bedacht, zal ik het hier melden.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan