• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mousover ink. Map möglichkeit

PSzepan

Neues Mitglied
Hallo zusammen,

ich verzweifel langsam und brauche mal eure Hilfe ich habe ein Bild was ich mit Mousover einbländen lasse, wenn nun das Mousover Bild da ist sehe ich auf dem Bild 9 kleine Bilder die dann per Map auf die einzelnen unterseiten linken soll

beide möglichkeiten einzelnd gehen ohne Problem Mousover kleines Bild dann großes Bild geht super

auch wenn ich das Große Bild nur anzeigen lasse geht das mit der MAP auch super ...

nur ich weis nicht wie ich es schafe das ich das kleine Bild habe und wenn ich mit der Maus drauf gehe kommt das große Bild und dann soll da das mit der Map gehen

HTML:
Mousover

<div id= "Navi">
<a
onmouseover="document.images.navigation99.src='./navigation2.png'"
onmouseout="document.images.navigation99.src='./navigation.png'">
<img src="./navigation.png" name="navigation99" alt="General information"></img>
</a>
</div>


Hover links


<map name="menue">
  <area shape="rect" coords="1,0,53,43" href="./General+information#go"  alt="go to General" title="">
  <area shape="rect" coords="54,0,106,43" href="./Methodology+2.0#go"  alt="" title="go to Methodology">
  <area shape="rect" coords="107,0,159,43" href="./Document+library#go"  alt="" title="go to Document">
  <area shape="rect" coords="1,44,53,87" href="./FAQ#go"  alt="" title="go to FAQ">
  <area shape="rect" coords="54,44,106,87" href="./Tools#go"  alt="" title="go to Tools">
  <area shape="rect" coords="107,44,159,87" href="./glossary#go"  alt="" title="go to Glossary">
  <area shape="rect" coords="1,88,53,130" href="./Training+Material#go"  alt="go to Training" title="">
  <area shape="rect" coords="54,88,106,130"./Calendar#go"  alt="go to Calendar" title="">
  <area shape="rect" coords="107,88,159,130"./Contact+details#go"  alt="" title="go to Contact">
</map>

wie schafe ich das beide zusammen gehen
 
Zuletzt bearbeitet:
Hallo,

ok und was hast versucht?

zb einfach mal dem img usemap="#menue" ein zu fügen?

da vor solltest aber natürlich die fehler aus den letzten beiden area machen.

Cheffchen
 
Hallo Cheffchen,

danke das du helfen willst, und ich habe schon vieles versucht bin aber A) HTML anfänder und weis nicht genau was du meinst und B) ich habe versucht nach Mousover bei dem Bild
onmouseout="document.images.navigation99.src='./navigation.png'">

das Map einzubauen aber das passirt nichts :(

ich weis echt nicht wie ich das hin bekommen soll (wenn es überhaupt geht) das man bei Mausover dann eine MAP hat
 
Hallo,

deine zeile7
HTML:
<img src="./navigation.png"...
in so ändern
HTML:
<img usemap="#menue" src="./navigation.png"...
mehr nicht, das sollte auch ein anfänger hin bekommen :O)
aber wie gesagt, zeile 23 und 24 haben fehler :O)

Cheffchen
 
Hallo Cheffchen,

nun erst mal danke für deine Hilfe und den Tip mit Zeile 23 und 24, aber es geht leider nicht deine Lösung

Ich will wenn ich mit der Maus auf das Bild navigation.png komme einen Maus-over haben das Bild navigation2.png kommt und auf dem Bild soll dann die Map Möglichkeit gehen. und wenn ich wieder aus dem Bild navigation2.png fahre mit der Maus soll wieder Bild navigation.png kommen

den Bild navigation.png ist nur eine kleine lasche am linken rand die dann im bild navigation2.png zu einem Menü wird und ich von da aus per MAP auf die Unterseiten komme
 
Hallo,

ach so.

das kann so nicht funktionieren.
Denn wenn auf ein area bist bist nicht mehr onmouseover und damit verschwindet das hover bild.

Also soll ein Menü aufsliden und wie so machst das mit usemap und nicht richtig per javascript/jquery mit einem richtigen menü?

Klick mal in meiner Signatur auf den Link und dann siehst links am rand was gelbes, klick mal draus, soll das so werden?
Der vorteil da kannst halt ein richtiges menü rein machen oder wenn es sein muss dein usemap.

Cheffchen
 
Hi Cheffchen,

nun weil hier in der Firma eigentlich am Wiki nichts geht nicht mal richtiger HTML geschweige Java das ein oder andere geht nach vielen versuchen ...

also deine Seite ist cool wow :)

aber jetzt noch mal zu meinem Problem ... gibt es den eine Möglichkeit das hin zu bekommen den jedes für sich geht
also navigation2.png bild wo die navigation drauf ist geht alleine gut mit map auch das mousover auch allein nur in Kombi nicht :(

ach so es ist nicht wirklich ein Menü in vorm von Text sonder 9 kleine Bilder auf einem navigation2.png Bild
 
Hallo,

also nur so, Java ist was ganz anderes, wenn zu faul dann JS (^o°).

Dann kann ich nicht helfen, reines JS ohne jquery unterstützung kann ich nicht mehr, zu schwer.
Jquery funzt eigentlich immer und wenn dein inline JS funktioniert dann gibts kein grund wie so jquery nicht funktionieren sollte.

füge doch einfach mal zum test das follgende ein und klick auf "klick mich".
passiert was schickes?
oder schau mal vorher im quellcode der seite nach "jquery" STRG+F vielleicht ist das ja schon eingebunden.
HTML:
<p style="display:none;">Buh, süßes sonst...</p>
<b>Klick mich</b>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>   
<script>
  $("b").click(function(){
  $("p").slideToggle();
  });
</script>

wie gesagt so rein in JS kann ich nicht aber vielleicht ein anderer.

Cheffchen
 
Hallo Cheffchen,

das scheint zu gehen und wie soll daraus ein bild werden was dann beim aufklappen die map Funktion haben
und es soll Position Fix haben das es immer an der gleichen stelle steht wenn ich die Seite nach unten Scrolle
 
Hallo,

also geht jquery und damit steht dir die ganz welt offen und alles ist möglich.
Jetzt musst dir 100% klar sein wie das genau ablaufen soll. Schleife -> klick->bild geht neben der schleife auf.
so oder so änlich, musst du halt wissen und zuerst komplett in html und css bauen, so wie das aufgeklappt aussehen soll.
Wenn das hast einfach den bild das style geben style="display:none;" und mit dem jquery code oben ganzt das wieder sichtbat machen.

aber ohne link wird das mit helfen schwer wenn wo hängst.

oder schau doch einfach wie auf meiner seite das gemacht wurde, dürfte doch so zihmlich das sein was suchst.

Cheffchen
 
das klingt gut aber ich komme leider kein stück weiter den ich weis echt nicht wie der Ansatz dann ist mit bild und map in einem
 
Hallo,
1. du erstellst dein usemap und deine schleife und positionierst das so wie das am ende aussehen soll.
2. Wenn das hast, wird das usemap per jquery aus- bzw. eingeblenden nach klick auf der schleife.

zuerst musst halt 1. machen und das kannst halt nur du machen bzw. hast doch oben schon nur ohne dem onmouseover zeug.

Cheffchen
 
Zurück
Oben