bild mit text

guenther · 9. Dezember 2018

hallo leute, ich habe ein problem

ich möchte uf einer seite ein Bild einfügen wenn man draufklikt sollen zwei textre rauskommen die man ankliken kann

dieses habe ich

HTML

<a href="bild.php"><img src="js/jetzt-helfen.png" alt="Bild" /></a<img src="fileadmin/templates/res/images/jetzt-helfen.png" width="105" height="102" alt="Jetzt helfen:" /><ul class="jetzthelfen-menu"><li><a href="online-spenden/" target="_blank">Spenden</a></li><li><a href="mitarbeit/">Mitarbeit</a></li></ul></div><div class="clear"></div></div></div><div>

wie kann ich das schreiben das der Text Spenden und Mitarbeit nebeneinader herauskommen, jetzt ist alles untereinander

Ich währe dankbar für eure Hilfe

Stef · 9. Dezember 2018

Hey,

ich habe das Thema zu Javascript verschoben, da es was mit Javascript zu tun hat.

Desweiteren bitte deinen Code leserlicher hier rein stellen und in Code Tags einfügen. Vielen Dank

Nun zu deinem Problem:

Du kannst auf das Bild ein JS-Click Event registrieren. Beim Click kommt zu erst der erste String raus und dann zeitversetzt der 2 te.

Nützliche Links:

JS Click Event -> Click Event auf Bild

JS setTimeout -> zur verzögerten Ausgabe

JS Add Class -> um die CSS Klasse hinzuzufügen

Grüße,

Stef

guenther · 9. Dezember 2018

Danke für deine Antwort!

Währst du bitte so nett und könntest mir das schreiben wie ich das reinstellen soll?

währe nett von dir, da ich mich irgendwie nicht durchblicke!

guenther · 9. Dezember 2018

Ich meine dies so:

Bild = wenn du draufklickst kommt ein text zum aussuchen Sponsor darunter Mittarbeit

Das gehört für unseren Verein und ich bin dabei sowas zu machen ist halt eine Idee

Oder wen es ginge Bild neben zwei graue Balken wo der Text drinnen ist zum aussuchen, geht so etwas auch?

basti1012 · 9. Dezember 2018

kannst du mmal dein jetzigen code zeigen mit css.

Machbar ist fast alles

guenther · 9. Dezember 2018

a href="bild.php"img src="js/jetzt-helfen.png" alt="Bild" //aimg src="fileadmin/templates/res/images/jetzt-helfen.png" width="105" height="102" alt="Jetzt helfen:" /ul class="jetzthelfen-menu"lia href="online-spenden/" target="_blank"Spenden/a/lilia href="mitarbeit/"Mitarbeit/a/li/ul/divdiv class="clear"/div/div/divdiv

hier der link

ich breuchte wie gesagt ein bild daneben zwei spalten untereinander mit einem text den man weiterverlinken kann: Spenden und Mitglied-werden

guenther · 9. Dezember 2018

schau ich will das eigentlich so haben wie auf https://www.samariterbund.net/landesverband-wien/ Spenden und Mitarbeit

kannst du mir da den html link aufschreiben? währe nett von dir

Sempervivum · 9. Dezember 2018

Bild mit Text machst Du am besten mit dem figure-Tag: Darin ein img-Tag mit dem Bild und einem figcaption-Tag mit dem Text bzw. dem Link.

Und steuern, ob Elemente nebeneinander oder untereinander angeordnet werden, am einfachsten mit Flexlayout:

https://www.html-seminar.de/css-flexbox.htm

Und den hover-Effekt mit CSS-Transition für transform:translateX

basti1012 · 9. Dezember 2018

Zitat von guenther

schau ich will das eigentlich so haben wie auf https://www.samariterbund.net/landesverband-wien/ Spenden und Mitarbeit

kannst du mir da den html link aufschreiben? währe nett von dir

Du meinst wohl html Code ? Hat dein Browser die funktion Quelltext anzeigen ? Oder browser Konsole anzeigen oder so ?

Damit kannst du sehen wie die Seiten aufgebaut sind bzw wie die das gemacht haben.

Wie Sempervivum es schon beschrieben hat wäre es am richtigsten.

Ich habe das da jetzt raus geholt aber du wahrst doch schon aufden richtigen Weg. Das html hast du ja schon. Jetzt brauchst du nur noch die css dazu .Sind ca 40 Zeilen die da benutzt wurden.

Ich habe aber erstmal nee andere Frage . Wie weit bist du mit dein html und css wissen ? Weit am Anfang oder ?

guenther · 10. Dezember 2018

Ja bin am Anfang und ich lerne gerne! Wenn ihr mir helft dan geht das eventuell schneller!

basti1012 · 10. Dezember 2018

An besten liest du dich erstmal hier rein https://www.html-seminar.de/html-seitenaufbau.htm

Das brauchst du eigentlich auf jeder webseite

In dein Fall must du dein html Code aus post #1 zwischen die Bodys Kopieren.

<Dann brauchst du noch die Css von deinen Menü sag ich mal dazu.

Die Css packst du in einer extra Datei , oder in <style> Tags die in <head> Kommen.

Wenn du meinen Link durch liest solltest du das jetzt zusammen bauen können.

Die Css habe ich da mal rausgeholt bzw etwas anpassen müssen

Code

.jetzt-helfen {
    position: relative;
    float: left;
    width: 260px;
    margin: 44px 0 0 0;
}
.jetzt-helfen img {
    position: absolute;
    top: 0;
    left: 0;
}
.jetzt-helfen ul {
    margin-top: 15px;
}

 ul {
    list-style: none;
}

.jetzt-helfen ul li {
    background: #a7a8aa;
    width: 180px;
    margin-left: 10px;
    height: 32px;
    margin-top: 4px;
    transition: margin-left 500ms;
}
    img:hover{
      transform:rotate(360deg);
       transition: all 500ms;
   
    }
.jetzt-helfen ul li:hover {
    margin-left: 50px;
    transition: margin-left 500ms;
}

.jetzt-helfen ul li a {
    color: #FFF;
    font-size: 15px;
    text-transform: uppercase;
    display: block;
    font-weight: bold;
    padding: 9px 0 8px 75px;
    letter-spacing: 1px;
    background: url(https://www.samariterbund.net/fileadmin/templates/res/images/jetzt-helfen-pfeil.png) no-repeat left 55px top 9px;
      color: #ffffff;
    text-decoration: none;
}

.jetzt-helfen ul li:hover{
  background:#555;
}

Alles anzeigen

Zusammen bauen must du jetzt aber. Falls dunicht weiter kommst dann meld dich nochmal

Sempervivum · 10. Dezember 2018

Ich habe da auch etwas ausgearbeitet, ohne Float und ohne absolute Posiitonierung, so wie ich es in #8 beschrieben hatte:

http://jsfiddle.net/Sempervivum/o0e1s3rp/39/

Kann man noch etwas aufhübschen und das Bild austauschen, mir kam es zunächst nur auf die Funktion an.

guenther · 15. Dezember 2018

Danke dir vielmals, genau das habe ich gesucht!

bild mit text

Jetzt mitmachen!

Teilen

Tags