Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Mausover mit rechteckigem Aufzählungszeichen wie ?
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Mausover mit rechteckigem Aufzählungszeichen wie ?

Pages: [1] 2 ... nächste » ... Letzte »
geschrieben von donrosso am 03.03.2005 - 17:04
Hallo ich habe ne Frage, ich möchte eine kleine mit Aufzahlungszeichen (kleine Quadrate)Navigation bauen. Ich möchte das beim Mausover die Quadrate eine andere Farbe haben, möchte aber nur die Quadrate als Grafik in die Webseite einbinden und nicht die Links, bzw Schrift an sich als Grafik. Wie mach ich das? Ich habe eine Beispielseite gefunden, die das genauso hat wie ich es auch will. Nur halt in anderen Farben und an anderer Position :

http://www.accenture.de/index2.html..../index.jsp

So ungefähr möcht ich das auch haben. Kann mir da jemand behilflich sein, wie das geht.

Wie gesagt ich möchte nur die Quadrate als Grafik haben, die eigentlichen Links als normale Schrift, aber wenn ich über die Links drüberfahre soll das Quadrat die Fraeb ändern.

geschrieben von The Chocolate Starfish am 03.03.2005 - 17:32
vielleicht hilft dir das:
http://leininger.gmxhome.de/privath....eover.html
http://leininger.gmxhome.de/privath....over2.html

vorallem auch auf die "hier"-links klicken
über die gelangts zu den Beispielen

geschrieben von René am 03.03.2005 - 18:21
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 

<html>
<head>

<style type="text/css">
<!--
ul
{
	list-style-type: square;
	color: #00f;
}

a
{
	text-decoration: none;
	color: #000;
}
//-->
</style>

</head>
<body>

<ul>
  <li onmouseover="this.style.color='#f00';" onmouseout="this.style.color='#00f';"><a href="#">link1</a></li>
  <li onmouseover="this.style.color='#f00';" onmouseout="this.style.color='#00f';"><a href="#">link2</a></li>
  <li onmouseover="this.style.color='#f00';" onmouseout="this.style.color='#00f';"><a href="#">link3</a></li>
  <li onmouseover="this.style.color='#f00';" onmouseout="this.style.color='#00f';"><a href="#">link4</a></li>
</ul>

</body>
</html>

geschrieben von donrosso am 04.03.2005 - 14:15
@ The Chocolate Starfish Danek für den Link

@ Rene, das funktioniert mit dem Code. Aber was muss ich in dem Code jetzt verändern, wenn ich eine Grafik einbinden will, statt der Standardaufzählungszeichen. Also wenn ich jetzt z.B. beim Standartlink ein Quadrat mit blauem Rand haben will ohne Farbfüllung und bei Mausover soll das Quadart dann baleun Rand und blaue Farbfüllung haben. Die Quadrate habe ich im Corel schon gebaut, wie binde ich die Grafiken jetzt in den Code ein? Oder geht das auch ohne Grafiken ?

geschrieben von Daniel am 04.03.2005 - 14:18
http://de.selfhtml.org/css/eigensch....listen.htm

geschrieben von Armin am 04.03.2005 - 14:20
In den CSS-Angaben dann
li {
list-style-image: url(bild_pfad)
}

Armin

geschrieben von donrosso am 04.03.2005 - 14:48
Ok das mit der Grafik einbinden hat geklappt, aber wie sage ich jetzt, dass er beim Mouseout die andere Grafik anzeigen soll? Also ich habe Grafik 1, die beim Standard-Link erscheinen soll, und Grafik 2, die beim Masuover erscheien soll. Sieht das dann im Css so aus oder wie ?


li {
list-style-image: url(Grafik1.jpg)
list-style-image2: url(Grafik2.jpg)
}

und dann unten so ?

<ul>
<li onmouseover="this.style.image='Grafik2.jpg';"onmouseout="this.style.image2='Grafik1.jpg';"><font face="Verdana" style="font-size: 8pt"><a href="#"><font color="#003366">Link1</font></a></font></li>
</ul>

stimmt das ?

geschrieben von okley am 04.03.2005 - 18:10
wieso nicht selbst probieren?

nun ich würde das so lösen:

PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 

<?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta name="generator" content="Webweaver v1.6.6 [http://pr0g.net]" />
<script type='text/javascript'>

function change (id) {
document.getElementById(''+id+'').className='over';
}
function changeback (id) {
document.getElementById(''+id+'').className='out';
}

</script>
</head>
<body>
<style type="text/css">
<!--

a{
  font-family: verdana;
  font-size: 12px;
}

li {
list-style-image: url('./gibtesnicht.gif');
}

.over{
list-style-image: url('./edit.gif');
}

.out{
list-style-image: url('./engl.gif');
}
//-->
</style>

<ul>
    <li onmouseover="change(1);" onmouseout="changeback(1);" id='1'><a href="#">Link1</a></li>
</ul>

</body>
</html>
?>


es gibst bestimmt auch andere wege ;)

geschrieben von Daniel am 04.03.2005 - 18:16
document.getElementById(id).className='over'; reicht auch

geschrieben von donrosso am 09.03.2005 - 16:56
Also der Provider, bei dem meine Seite liegt, lässt PHP nicht zu, bei dem Paket, dass ich gekauft habe.

Also muss ich dass mit diesem Css machen. Ist denn der Code, den ich hingeschrieben habe richtig? Bzw. Er ist wohl nicht richtig, weil es nicht funktioniert. Was muss ich anders machen ?

geschrieben von okley am 09.03.2005 - 17:23
den code von mir, oder die vereinfachte version von daniel funktionieren.
das sind javascript varianten, mit denen man auf die class eigenschaften des elements zugreift und diese neu setzt.
das hat nichts mit php zu tun und wird auf der clientseite ausgeführt.

geschrieben von donrosso am 10.03.2005 - 14:24
Also, das mit dem Mausover im Javascript klappt zwar, aber wenn ich weiter Aufzählungspunkte hinzufüge, dann wird beim Mausover immer nur beim ersten Aufzälungspunkt die Grafik gewechselt, bzw. kommt der Mausovereffekt, also egal ob ich über den 2., 3., oder 4. Link fahre der Mausovereffekt erscheint nur beim ersten. Was hab ich falsch gemacht ?

So sieht mein Code aus:

<script type='text/javascript'>

function change (id) {
document.getElementById(''+id+'').className='over';
}
function changeback (id) {
document.getElementById(''+id+'').className='out';
}

</script>
</head>
<body>
<style type="text/css">
<!--

a{
font-family: verdana;
font-size: 12px;
}

li {
list-style-image: url('Grafik1.jpg');
}

.over{
list-style-image: url('Grafik2.jpg');
}

.out{
list-style-image: url('Grafik1.jpg');
}
//-->
</style>

<ul>
<li onmouseover="change(1);" onmouseout="changeback(1);" id='1'><a href="#">Link1</a></li>
<li onmouseover="change(1);" onmouseout="changeback(1);" id='1'><a href="#">Link2</a></li>
<li onmouseover="change(1);" onmouseout="changeback(1);" id='1'><a href="#">Link3</a></li>
<li onmouseover="change(1);" onmouseout="changeback(1);" id='1'><a href="#">Link4</a></li>
</ul>

</body>
</html>
?>

geschrieben von Armin am 10.03.2005 - 15:50
Hi,

du musst die id und die Aufrufe anpassen.

Beim zweiten so:
<li onmouseover="change(2);" onmouseout="changeback(2);" id='2'><a href="#">Link4</a></li>

Und die anderen halt auch anpassen.

Armin

geschrieben von donrosso am 10.03.2005 - 17:23
ja, klappt. Noch eine letzte Frage, in der Berabeitungsansicht sind die Links und die Aufzählungszeichen bündig zueinander bzw. halt genau nebeneinander und in der Browservorschau nicht, das sind die Links weiter unten als ide Aufzählungszeichen, liegt das am Code, an der Grafik oder an der Schriftart der Links ?

geschrieben von Matneu am 12.03.2005 - 17:40
Für die CSS-konformen Browser würde ich eher
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 

li {
list-style-image: url(bild_pfad)
}
li:hover {
list-style-image: url(bild_pfad)
}

benutzen. Für den IE kannst Du weiterhin die Javascript-Variante nutzen, denn <Vorurteil>wer den IE nutzt hat auch sowas wie Javascript aktiviert</Vorurteil>

So far...
Matthias


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.