nicht angemeldet
cursor ändern beim Link
hallo,
ich möchte, wenn ich auf einen Link klick, dass sich der Cursor ändert (das ganze dann in einer Usemap)
aber auf der Seite soll es verschiede Links geben, also auch verschiedene Cursor, kann mir jemand helfen?
Danke ;-)
-
Hallo supersass1.
aber auf der Seite soll es verschiede Links geben, also auch verschiedene Cursor, kann mir jemand helfen?
Schau mal hier: CSS Attribut cursor
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
Try it: Become an Opera Lover in 30 days-
Hallo supersass1.
aber auf der Seite soll es verschiede Links geben, also auch verschiedene Cursor, kann mir jemand helfen?
Schau mal hier: CSS Attribut cursor
Gruß, Ashura
ja, aber dann hat die ganze Seite diesen Cursor, ich will aber nur, das der Link den Cursor hat
-
Hallo supersass1.
ja, aber dann hat die ganze Seite diesen Cursor, ich will aber nur, das der Link den Cursor hat
Du musst es ja nicht unbedingt für body definieren.
Du kannst deine Links in bestimmte Klassen unterteilen und diesen Klassen unterschiedliche Cursor zuweisen.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
Try it: Become an Opera Lover in 30 days-
Hallo supersass1.
ja, aber dann hat die ganze Seite diesen Cursor, ich will aber nur, das der Link den Cursor hat
Du musst es ja nicht unbedingt für body definieren.
Du kannst deine Links in bestimmte Klassen unterteilen und diesen Klassen unterschiedliche Cursor zuweisen.
Gruß, Ashura
und wie mach ich das?
-
Hallo supersass1.
und wie mach ich das?
Kombiniere den Link, den ich dir schon gegeben habe hiermit.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
Try it: Become an Opera Lover in 30 days-
das geht irgendwie nicht:
<style type="text/css">
<!--
*.hinterlegt {cursor:cursor:s-resize}
-->
</style><p align="center">
<img src="Bilder/1.jpg" alt="" border="0" usemap="#main">
</p><map name="main">
<area shape="CIRCLE" coords="600,300,140" href="draußen1.html" class="hinterlegt"></map>
</body>
</html>-
Hallo supersass1.
*.hinterlegt {cursor:cursor:s-resize}
Öhm... Einmal reicht. ;)
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
Try it: Become an Opera Lover in 30 days-
habe ich auch probiert, geht nicht :-(
<style type="text/css">
<!--
*.hinterlegt {cursor:s-resize;}
-->
</style><p align="center" >
<img src="Bilder/1.jpg" alt="" border="0" usemap="#main">
</p><map name="main">
<area shape="CIRCLE" coords="600,300,140" href="draußen1.html" class="hinterlegt"></map>
</body>
</html>-
Hallo supersass1.
<style type="text/css">
<!--
*.hinterlegt {cursor:s-resize;}
-->
</style>Das befindet sich aber hoffentlich im
headBereich, oder..?Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
Try it: Become an Opera Lover in 30 days-
geht auch dann nicht :-(
<title>Haus</title>
<style type="text/css">
<!--
*.hinterlegt {cursor:s-resize;}
-->
</style></head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"><p align="center" >
<img src="Bilder/1.jpg" alt="" border="0" usemap="#main">
</p><map name="main">
<area shape="CIRCLE" coords="600,300,140" href="draußen1.html" class="hinterlegt"></map>
</body>
</html>-
Hallo supersass1.
Soll am Ende das Bild "anklickbar" sein? Wenn ja, musst du u. U. diesem die Klasse zuweisen
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
Und das möchtest du doch bitte mit CSS machen. ;)
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
Try it: Become an Opera Lover in 30 days-
also, ich möchte nur, dass sich hier:
<area shape="CIRCLE" coords="600,300,140" href="draußen1.html" class="hinterlegt">
der cursor ändert, also ein bestimmter Bereich auf meinem Bild, den ich anklicken kann.
-
-
-
Hallo Ashura, hallo supersass1,
Areas in Imagemaps kann man meines Wissens keine Style-Eigenschaften zuweisen, sondern nur den kompletten Bildern, auf die sie sich beziehen. Daher bleibt als einziger Ausweg JavaScript, wenn man will, das sich die Style-Eigenschaften des Bildes über bestimmten Bereichen ändern.
Gruß Gernot
-
Hallo Gernot.
Areas in Imagemaps kann man meines Wissens keine Style-Eigenschaften zuweisen, sondern nur den kompletten Bildern, auf die sie sich beziehen.
Oha, das wusste ich nicht, da ich mit Imagemaps nie arbeite.
Danke, wieder etwas gelernt. ;)
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
Try it: Become an Opera Lover in 30 days-
gut, und kannst du / können Sie mir das dann bitte mal mit javascirpt erklären, oder zeigen, was ich machen muss?
-
gut, und kannst du / können Sie mir das dann bitte mal mit javascirpt erklären, oder zeigen, was ich machen muss?
ich hab bis jetzt:
<html>
<head>
<script language="JavaScript">
<!--
function aendern(was) {
document.getElementById(was).style.cursor="ne-resize";
}
//-->
</script><title>Haus</title>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"><p align="center" >
<img src="Bilder/1.jpg" alt="" border="0" id="main3" usemap="#main">
</p><map name="main">
<area shape="CIRCLE" coords="600,300,140" href="draußen1.html" id="main2" onClick="aendern('main2')"></area>
</map>
</body>
</html>-
Hallo supersass1,
na dann will ich mal nicht so sein:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title></title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<script type="text/javascript" language="JavaScript">
<!--
function aendern (wo, welcher) {
document.getElementById(wo).style.cursor=welcher;
}
//-->
</script></head>
<body >
<img usemap="#schuss" id="hirsch" style="cursor:wait" src="http://www.woertherseetreffen.at/sponsoren/jaegermeister.jpg" width="250" height="266" border="0" alt="Den Hund zum Jagen tragen ...">
<map name="schuss">
<area shape="CIRCLE" coords="126, 81, 80" href="#" onMouseOver="aendern('hirsch', 'crosshair')" onMouseOut="aendern('hirsch', 'wait')" alt="und Schuss!">
<area shape="RECT" coords="0, 167, 250, 248" href="#" onMouseOver="aendern('hirsch', 'help')" onMouseOut="aendern('hirsch', 'wait')" alt="Was will uns der Künstler damit sagen?">
</map>
</body>
</html>Wenn du nur ein Bild mit mehreren Areas hast, über denen du unterschiedliche Cursor haben möchtest, kannst du auf den ersten Übergabeparameter auch verzichten und schreibst halt von vornherein in deiner aendern-Funktion immer:
document.getElementById('hirsch').style.cursor=welcher;
Für mehrere Bilder oder mehrere Slices eines Bildes brauchst du auch immer noch die id des Bildes, über dem sich der Cursor ändern soll. Diese ID darfst du natürlich auch im Bild selbst nicht vergessen. Und klar, IDs sind immer einmalig, d.h. jedes Bild hat seine eigene unverwechselbare Identität, sonst kann es nicht funktionieren.
Gruß Gernot
-
Hallo nochmal,
mir ist bei meiner Lösung gerade noch etwas Komisches aufgefallen:
Damit sie auch in Opera (getestete Version:7.54 unter Win98) funktioniert, darf die Area in der Imagemap kein href-Attribut haben, sonst werden die Spezialcursor von dem für Links klassischen Pointer überlagert. Hingegen ist es bei Mozilla (1.7.2) genau umgekehrt: Das href-Atribut muss da sein, sonst wird die Area nicht als solche erkannt.
Lösung aus dem Dilemma: man entfernt die HREF-Attribute nachträglich aus den Areas. Dann geht es in beiden Browsern. Nachteil: Als Links sind die Areas untauglich, Aufrufe anderer Seiten kann man dann ggf. nur noch über JS und den EventHandler "onClick" tätigen.
So sieht das ergänzte Skript aus:
<script type="text/javascript" language="JavaScript">
<!--
function aendern (wo, welcher) {
document.getElementById(wo).style.cursor=welcher;
}function elimHref () {
var areas = document.getElementsByTagName('area');
for (i=0; i<areas.length ; i++ ) {
areas[i].removeAttributeNode(areas[i].attributes[2])
}
}window.onload=elimHref;
//-->
</script>Gruß Gernot
-
-
-
-
-
-
-
-
-
-
-
-
-
Hallo supersass1,
Schau mal hier: CSS Attribut cursor
ja, aber dann hat die ganze Seite diesen Cursor, ich will aber nur, das der Link den Cursor hat.
Die ganze Seite nicht, das ist ja auch hier nicht der Fall, wohl aber das ganze Bild, das du mit der Imagemap differenzieren willst. Um hier innerhalb eines Bildes unterschiedliche Cursor zu erhalten, musst du wohl oder übel mit JavaScript arbeiten.
So habe ich es z.B. bei meinem letzten Projekt gemacht:
Bei den Etagen der Schnitt-Darstellung des Hauses handelt es sich um mit Hash(#) zum Schein verlinkte Image-Slices (damit auch der IE den Hovereffekt darstellen kann). Im Erdgeschoss dient aber nur der grüne Pfeil tatsächlich als Link zum Öffnen eines Popups. Damit das auch beim Cursor-Verhalten deutlich wird, habe ich den nur scheinbar verlinkten Bildern per CSS den Default-Cursor zugewiesen:
#schnitt a {
cursor:default;
}Wenn sich der Cursor aber im Erdgeschoss über dem grünen Pfeil befindet, soll er sich dennoch in ein Händchen umwandeln. Das mache ich mit diesen beiden Funktionen, die ich mit den Eventhandlern onMouseOver und onMouseOut in der entsprechenden Area der Imagemap aufrufe:
var ie = (document.all && ! window.opera) ? true : false;
function handcrs (slice) {
if(ie) {
document.all[slice].style.cursor="hand";
} else {
document.getElementById(slice).style.cursor="pointer";
}
}function defcrs (slice) {
if(ie) {
document.all[slice].style.cursor="default";
} else {
document.getElementById(slice).style.cursor="default";
}
}Gruß Gernot
-
ich hab das versucht zu machen, funktioniert aber nicht:
<style type="text/css">
<!--
#main2 {
cursor:default;
}
-->
</style><p align="center">
<img src="Bilder/1.jpg" alt="" border="0" usemap="#main">
</p><map name="main">
<area shape="CIRCLE" coords="600,300,140" href="draußen1.html" title="main2"></map>
</body>
</html>-
Hallo supersass1.
<map name="main">
name ist nicht gleich id. Zudem möchtest du diese Eigenschaft sicher mehrfach verwenden, oder?
Wenn ja, dann arbeitest du besser mit Klassen
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
Try it: Become an Opera Lover in 30 days -
Hallo supersass1,
ich hab das versucht zu machen, funktioniert aber nicht:
#main2 {
cursor:default;
}<img src="Bilder/1.jpg" alt="" border="0" usemap="#main">
Wenn du deinem Bild jetzt auch noch die id="main2" verpasst, also
<img src="Bilder/1.jpg" alt="" border="0" id="main2" usemap="#main">
... und vielleicht testweise erst einmal einen anderen Cursor, vielleicht crosshair ...
<map name="main">
<area shape="CIRCLE" coords="600,300,140" href="draußen1.html" title="main2"></map>... und in deiner Area dann per Eventhandler eine ensprechende Cursor-Änderungsfunktion aufrufst, also z.B.:
<area shape="CIRCLE" coords="600,300,140" href="draußen1.html" title="main2" onClick="aendern('main2')">
function aendern(was) {
document.getElementById(was).style.cursor="ne-resize";
}... wirst du sehen, dass sich was tut.
Diese Änderung kannst du dann onBlur oder onMouseOut auch wieder rückgängig machen mit einer entsprechenden Rückänderungsfunktion.
Gruß Gernot
-
ja, aber ich will nur, dass sich was in der Klickmap ändert
-
-
-
-
-