1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

text einblenden

  • Onlinefreak
  • 4. Dezember 2007 um 21:13
  • Onlinefreak
    Azubi(ne)
    Beiträge
    51
    • 4. Dezember 2007 um 21:13
    • #1

    einen Text neben ein Bild machen, der wenn man über das Bild drüberfährt erscheint und wenn man nicht drüberfährt wieder weg geht?

    Also ich meine so wie beim YouTube Logo. :roll:

    Danke für eure Antworten! ;)

    - Onlinefreak


    driver:
    - titel geändert (bitte in zukunft beim erstellen drauf achten, und wenn man dann schon dran erinnert wird - wenigstens ändern)
    - die anderen beiträge hab ich gelöscht. wenn man nix dazu sagen kann, grafikboard, einfach mal die klappe halten....

  • fler171087
    Meister(in)
    Beiträge
    340
    • 4. Dezember 2007 um 22:07
    • #2

    schon wieder grafikboard !!!


    gib ihn doch ne richtige antwort nicht wie hast du schonmal gegoogelt !!!
    10beiträge sagen alles !

    dann poste ihm ein link zu google suchergebnisse!

    wenn ich dich richtig verstanden hab ist das sowas wie mouseover effekt

    http://www.google.de/search?hl=de&q…gle-Suche&meta=

    [Blockierte Grafik: http://express-hoster.de/banner.jpg]
    [Blockierte Grafik: http://rapspot.de/Forum/werbematerialien/werbebanner1.gif]

  • Onlinefreak
    Azubi(ne)
    Beiträge
    51
    • 4. Dezember 2007 um 22:07
    • #3

    Ja, auch in selfhtml find nichts...

  • K.Y.L.T.
    König(in)
    Beiträge
    1.015
    • 4. Dezember 2007 um 22:41
    • #4

    Das gibts doch nicht 2 Klicks auf den Link...

    http://www.on-mouseover.de/script1.htm

    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.
    [Blockierte Grafik: http://www.snippr.de/social/img/logo.png]
    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  • CLiff
    Gast
    • 4. Dezember 2007 um 22:44
    • #5

    Also ich kenne mich damit nicht aus, aber vielleicht könnt ihr damit was anfangen (?)

    Code
    <script type="text/javascript">
    		// <![CDATA[
    		var fo = new SWFObject("active_sharing.swf", "active_sharing", "550", "115", 7, "#FFFFFF");
    		var showstr = "Videos being watched right now...";
    		fo.addParam('wmode', 'opaque');
    		fo.addVariable("t", showstr);
    		fo.write("active_sharing_div");
    		// ]]>
    	</script>


    Ist halt der original Code aus YouTube ;) Ist mir so spontan eingefallen..lg vielleicht hlfts ja

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 4. Dezember 2007 um 22:54
    • #6

    So ähnlich, Details musst du noch anpassen (einen treffenderen Titel hätte ich mir allerdings auch gewünscht):

    CSS

    Code
    a.info{
        position:relative;
        z-index:1;
        color:#000;
        text-decoration:none}
    
    
    a.info:hover{z-index:2; background-color:#fff}
    
    
    a.info span{display: none}
    
    
    a.info:hover span{
        display:block;
        position:absolute;
        top:2em; left:2em; width:15em;
        border:1px solid #0cf;
        background-color:#cff; color:#000;
        text-align: center}
    Alles anzeigen

    HTML

    Code
    [url='#'][img]deinbild.jpg[/img]<span>Hallo, ich bin das Info-Fenster, hier kannst du Infos reinschreiben</span>[/url]

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • driver
    Forum Guru
    Reaktionen
    6
    Beiträge
    20.727
    • 5. Dezember 2007 um 08:29
    • #7

    ich werf hier nochmal kurz ein document.write in die runde.
    damit sollte man es auch hinbekommen, is halt js....

    >> die icq-schreiberlinge bitte dies hier beachten

    [Blockierte Grafik: http://www.devil-driver.de/stuff/forum-banner.png]

    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 5. Dezember 2007 um 09:03
    • #8

    ich denke mal daß sejuma´s css-popup die wohl beste variante ist sowas zu realisieren...
    kann man nicht ausschalten, ist leicht zu benutzen und voll funktionsfähig!
    javascript ist an dieser stelle einfach zu umständlich und
    @ driver: document.write() bringt hier denke ich mal gar nichts, denn der text müsste meines erachtens in einem eigenen div erscheinen, somit wäre document.getElementById("irgendwat").innerHTML="der text" angebrachter

  • driver
    Forum Guru
    Reaktionen
    6
    Beiträge
    20.727
    • 5. Dezember 2007 um 09:16
    • #9

    *grübl*

    ich muss mal daheim nachschauen. hab bereits mal so ne seite erstellt
    wo dann a text beim bildüberfahren kam. dachte das wäre mit document.write,
    aber vielleicht hab ich mich auch getäuscht... *G*

    >> die icq-schreiberlinge bitte dies hier beachten

    [Blockierte Grafik: http://www.devil-driver.de/stuff/forum-banner.png]

    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  • Onlinefreak
    Azubi(ne)
    Beiträge
    51
    • 5. Dezember 2007 um 16:43
    • #10

    Hm, habs mal mit Bildertausch versucht, aber onmouseout funktioniert nicht: :(

    <head>
    <script
    language="JavaScript">
    <!--
    button1= new Image();
    button1.src = "Logo.png"
    button2= new Image();
    button2.src = "Logo2.png"
    //-->
    </script>
    </head>

    <body>
    <a href="Home.html"

    onmouseover="button2.src='Logo.png';"
    onmouseout="button1.src='Logo2.png';">


    </a>
    </body>

    @ sejuma: Wo muss denn der Code hin und was muss in den Code eingefügt werden?

    Und was meint ihr mit popup? :?

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 5. Dezember 2007 um 17:44
    • #11

    Schreibe in den head-Bereich, z.B. vor

    Code
    </head>


    folgendes:

    Code
    <style type="text/css">


    Danach den von mir genannten CSS-Code.
    Und danach:

    Code
    </style>

    Den HTML-Code fügst du an der gewünschten Stelle innerhalb des <body> ein.
    Dann ändere noch die Dateibezeichnung und die Größe entsprechend deinem Bild im HTML-Code.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • Onlinefreak
    Azubi(ne)
    Beiträge
    51
    • 5. Dezember 2007 um 18:16
    • #12

    Wow danke!
    Sieht geil aus! :D

  • Onlinefreak
    Azubi(ne)
    Beiträge
    51
    • 5. Dezember 2007 um 18:34
    • #13

    Sorry, noch ne Frage:

    Kann man das hier vielleicht transparent stellen?

    a.info:hover{z-index:2; background-color:#fff}

    Bei manchen Bildern kommt dann nämlich so ein farbiger Streifen. :?

  • Onlinefreak
    Azubi(ne)
    Beiträge
    51
    • 5. Dezember 2007 um 19:36
    • #14

    Hier noch n Bild: :?

    [Blockierte Grafik: http://i194.photobucket.com/albums/z293/Onlinefreak94/Verdammt.png]

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 5. Dezember 2007 um 20:09
    • #15

    Ersetze mal "#fff" durch "transparent;"
    Ansonsten poste mal einen Link.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • Onlinefreak
    Azubi(ne)
    Beiträge
    51
    • 5. Dezember 2007 um 20:13
    • #16

    Tachtsächlig, funktioniert! :D

    Danke nochmal. :wink:

Tags

  • html
  • color
  • background
  • jpg
  • text
  • fenster
  • code
  • bild
  • position
  • runde
  • index
  • titel
  • border
  • css
  • info
  • display
  • align
  • js
  • hover
  • z-index
  • write

Benutzer online in diesem Thema

  • 1 Besucher
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche