Meny som ändrar text vid mouseover

7 svar · 371 visningar · startad av Danielkun 28 jan. 2005

DanielkunMedlem sedan maj 2003361 inlägg

Frågan28 jan. 2005 08:27#1

Jag har lekt med denna meny ett tag här nu, men jag undrar om det inte går att ändra texten vid mouseover?

Jag skulle vilja att den står på engelska först, men vid mouseover skrivs det på japanska.. nån som vet hur man skulle kunna gå till väga? :stud

http://css.maxdesign.com.au/listamatic/horizontal24.htm

PepeJeriaMedlem sedan feb. 2003774 inlägg

28 jan. 2005 08:49#2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<style type="text/css">
#navcontainer { /* none needed */ }

ul#navlist
{
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap;
}

ul#navlist li
{
float: left;
font-family: verdana, arial, sans-serif;
font-size: 9px;
font-weight: bold;
margin: 0;
padding: 5px 0 4px 0;
background-color: #eef4f1;
border-top: 1px solid #e0ede9;
border-bottom: 1px solid #e0ede9;
}

#navlist a, #navlist a:link
{
margin: 0;
padding: 5px 9px 4px 9px;
color: #95bbae;
border-right: 1px dashed #d1e3db;
text-decoration: none;
}

ul#navlist li#active
{
color: #95bbae;
background-color: #deebe5;
}

#navlist a:hover
{
color: #74a893;
background-color: #d1e3db;
}

#navlist a:hover span.eng
{
	display:none;
}

#navlist a:hover span.jap
{
	display:inline;
}

#navlist a span.jap
{
	display:none;
}
</style>
<body>

<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="#" id="current"><span class="eng">Item one</span><span class="jap">Japanska</span></a></li>
	</ul>
</div>

</body>
</html>

nitro2k01Medlem sedan aug. 20039 340 inlägg

28 jan. 2005 08:53#3

Enklast är nog att använda bilder, eftersom inte alla (Alltså de flesta utanför Japan) har japanska fonter på ina datorer.
Med det sagt finns det ändå en bra lösning, om du vill att det ska vara text som ändras.
Jag har skrivit ett litet "behavior" som det heter som fixar detta.

När det gäller själva tecknen, så finns det en sida som konverterar romaji till kana: http://kanjidict.stc.cx/hiragana.php. Välj &# codes som encoding, kopiera sedan från källan till alttext i koden.

Skriptet är inte kompatibelt med mozilla/firefox för tillfället, men ge mig ett par minuter så fixar jag det också :)

changelink.zip (1 kB)

zcorpanMedlem sedan dec. 20042 245 inlägg

28 jan. 2005 11:15#4

Japanska fonter?? http://annevankesteren.nl/archives/2004/05/unicode#comment-1321

nitro2k01Medlem sedan aug. 20039 340 inlägg

28 jan. 2005 11:17#5

Jag får dock säga att jag gillar PepeJerias lösning bättre än min egen.

zcorpanMedlem sedan dec. 20042 245 inlägg

28 jan. 2005 12:48#6

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<title></title>
<style type="text/css">
	a[lang="ja"][title]:hover::after {content: attr(title); padding: .1em;}
	a[lang="ja"][title]:hover span[lang="en"] {display: none;}
</style>
<ul>
	<li><a lang="ja" title="&amp;#33521;&amp;#21644;&amp;#36766;&amp;#20856;" href="#"><span lang="en">English</span></a>
</ul>

Så skulle jag vilja lösa det. Jag har inte lyckats få det fungera med IE, men å andra sidan visas den japanska texten i en tooltip <edit>...fel av mig, det visas fyrkantiga rutor i en tooltip</edit>. Annars kanske IE7 har lösningen. :)

PepeJeriaMedlem sedan feb. 2003774 inlägg

28 jan. 2005 12:50#7

Detta fungerar inte i IE eftersom den inte stöder CSS2 selectors... tyvärr. Kanske 2007?

DanielkunMedlem sedan maj 2003361 inlägg

28 jan. 2005 13:11#8

Tack så mycket PepeJeria!
Funkade perfekt på en gång. Ska ta och kolla igenom den nu.

nitro2k01, tack för ditt svar. Men sidan jag bygger är på japanska för japaner så jag tror dom har japanska fonter på datorn :)

RED.

Märkte en sak nu jag undrar lite över. Om texterna är annorlunda långa så anpassas menyn efter längden på texten som visas.

Hur gör man för att "sätta fast" bredden på en meny? :r

RED. Frågade detta i en ny tråd