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

Popup erstellen nach rechts

A

apfelearth

Neues Mitglied
Hallo,

ich möchte ein Popupm erstellen für ein CMS also geht nur ein HTML/CSS Baustein...

Und zwar so soll es dann aussehen:

Auf der Siedbar ist ein Bild, und wenn man über dieses Bild mit der Maus fährt sollte rechts vom Bild ein Popup oder so selber erscheinen mit einem Hintergrund und Text im Popup. Und wenn draufklickt sollte man aber trotzdem noch weiter kommen zu einem Link,

geht das irgendiwe? das poup sollte rechts sein und mit einem hintergrund definierbar sein
 
Werbung:
HTML: 
<html>
 <head>
  <title>CSS-popup</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style>
   #popup
   {
     display:none;
     background: #f00;
     float:left;
   }
   #bild:hover #popup
   { display:block; }
  </style>
 </head>
 <body>
  <div id="bild">
   <img src="bild.jpg" alt="bild" style="float:left" />
   <span id="popup">
    blabla blubb
   </span>
  </div>
 </body>
</html>
 
Zuletzt bearbeitet:
Werbung:
der wird nach so abgeändert:
¨

<div id="bild">
<img src="bild.src" alt="bild" style="float:left" /> <span id="popup">blabla blubb</span>
</div>
 
Und den CSS hast du auch gleich gelassen?
Das Bsp. so wie ich es oben gepostet funktioniert aber bei dir, oder?

Ansonsten, zeig mal bitte mehr von dem Code, dass man sehen kann, wie und wo der Code eingaubt wurde
 
Werbung:
das is ja nen sch***, aber egal.

Nach langem suchen, wie ich wo was wie bearbeiten kann: Startseite - this-is-a-tests Jimdo-Page! (unter der Nummer 2)

Wenn das bei dir nicht funktioniert, Frage: Welchen Browser benutzt du?


edit: Falls es dir hilft, meine Vorgehensweise:

Hab auf das eine Element mit der 2 und wo "Dies ist deine neue Website steht geklcikt, den HTML-Code bearbeitet (das hier ans Ende hinzugefügt:
HTML: 
  <div id="bild">
   <img src="bild.jpg" alt="bild" style="float:left" />
   <span id="popup">
    blabla blubb
   </span>
  </div>

), dann bei Einstellungen->Head bearbeiten
Code: 
  [COLOR=#800080]<style>[/COLOR]
   #popup
   {
     display:none;
     background: #f00;
     float:left;
   }
   #bild:hover #popup
   { display:block; }
  [COLOR=#800080]</style>[/COLOR]
eingefügt.

Das Popup konnte ich dann aber erst sehen, nachdem ich auf "Ansicht" geklickt habe.
 
Zuletzt bearbeitet:
Hallo

aber der hintergrund sollte ein link (url) sein und ein bild sollte da statt ein kästchen sein und wenn man drüberfährt solle rechts der text erscheinen und wenn man draufklickt sollte mna zu einem link weitergeleitet werden. kannst du mir den code nochmals posten
 
Werbung:
aber der hintergrund sollte ein link (url) sein
Zum Vergrößern anklicken....
??


und wenn man draufklickt sollte mna zu einem link weitergeleitet werden
Zum Vergrößern anklicken....
HTML: 
 <div id="bild">
   <img src="bild.jpg" alt="bild" style="float:left" />
   <span id="popup">
    <a href="link.html">blabla blubb</a>
   </span>
  </div>
und ein bild sollte da statt ein kästchen sein
Zum Vergrößern anklicken....
meinst du das Popup?, dann so
HTML: 
 <div id="bild">
     <img src="bild.jpg" alt="bild" style="float:left" />
     <span id="popup">
       <a href="link.html"><img src="bild.jpg" alt="popup-bild" /></a>
     </span>
  </div>


 
Weiß jetz leider nicht,w as du meinst?

Willst du nen Hintergrundbild im Popup?

Code: 
   #popup
   {
     display:none;
     background: url(popup-bild.jpg);
     float:left;
   }
HTML: 
 <div id="bild">
     <img src="bild.jpg" alt="bild" style="float:left" />
     <span id="popup">
       <a href="link.html">bgwhejrkztul5</a>
     </span>
  </div>
</span>
 
Werbung:
also ich möchte folgendes:

ein popup, welches aufpoppt nach rechts wenn man mit der maus drüberfährt das popup soll einen hintergrund haben dem man selbst mit einem bild bestimmen kann und dadrauf einen text setzten kann ins popup. das popup soll aber wieder verschwinden wenn man mit der maus wegfährt. falls man auf das bild klickt dann soll man immer noch zu einer bestimmten seite kommen. und wenn man drüberfährt soll wie oben beschrieben dasss popup nach rechts aufgehen. wäre nett wenn du dass noch schnell auf deine jimdo testseite auspropieren könntest
 
Werbung:
Dort, wo du den Abstand nach rechts haben wilst, musst das margin-right setzen.

HTML: 
 <div id="bild">
    <img src="bild.jpg" alt="bild" style="float:left; margin-right:5px" />
    <span id="popup">
      <a href="link.html"><img src="bild.jpg" alt="popup-bild" /></a>
    </span>
  </div>
 
und wo kann ich den text eingeben des popups? bitte sage nochmals alles was und wo ist was einbinden muss ;-) im header und so
 
Werbung:
HTML: 
 <div id="bild"> <!-- Container (enthält das zu hovernde Bild und das Popup) -->
    <img src="bild.jpg" alt="bild" style="float:left; margin-right:5px" /> <!-- das zu hovernde Bild -->
    <span id="popup"> <!-- das Popup -->
      <a href="link.html">Hier der Text des Popups</a> <!-- Der Inhalt des Popups -->
    </span>
  </div>
in den Header:

CSS
HTML: 
  <style>
   #bild
   { display: inline; }
   #popup
   {
     display: none; 
     background: url(popup-bild.jpg); /* Das hintergrundbild des Popups */
     float: left;
   }
   #bild:hover #popup
   { display: block; }
  </style>

 
merci hoffentlich klappt es, werde es gleich auspropieren und Bescheid geben, danke viel mals. Und noch ne Frage: Ich möchte gerne hier: Apple Kauf-Guide - Apfel Earth bei jedem kaufen, normal...etc. ein popup hinmachen, dass heisst wenn man mit der maus drüberfährt, dann sollte so ein popup aufpoppen, ganz normal mit weissem hintergrund und oben am liebsten. das sind aber mehrere popups so 15 oder so, geht das irgendiwe? und ist es eigentlich möglich so ein pfeil vom popup zu machen, so wie hier: Apple-Kauf-Guide | TechnikObst wenn man über neutral fährt
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben