Hallo,
auf meiner Website Malerei 2000 möchte ich im linksseitigen Menü (screenshot)
dass beim Überfahren mit der Maus der Textstelle 'das aktuelle Bild - Blaue Formen' dieses Bild aufpoppt. Geht das überhaupt und wenn ja, wie lautet der code dazu?
Ich möchte ein Bild aufpoppen lassen - wie geht das?
-
wie lautet der code dazu?
Was hast du bisher versucht?
-
Alles anzeigenHTML
- HTML
- ********************************
- <!DOCTYPE html>
- <html lang="de">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" href="style.css">
- <title>Titel</title>
- </head>
- <body>
- <a href="#">Button<img src="img/see.JPG" alt=""></a>
- </body>
- </html>
- CSS
- *********************
- body
- {
- margin: 0;
- padding: 0;
- }
- a img
- { display:none; }
- a:hover img { display:block; }
-
Schau mal hier https://answers.squarespace.co…use-over-a-word-text.html
-
Ich habe Google bemüht aber nichts brauchbares gefunden
Veralbern können wir uns alleine!
https://www.google.de/search?q=bild+bei+mouseover+vergrößern
1. Treffer!!!
-
Das man nicht alles sofort bei Google findet liegt daran das man als Anfänger nicht unbedingt die Begriffe kennt
-
Das man nicht alles sofort bei Google findet liegt daran das man als Anfänger nicht unbedingt die Begriffe kennt
Wenn man bei google eingibt
Zitatbild vergrößern maus
dann schlägt google schon Möglichkeiten vor, da muss man nicht unbedingt die Begriffe kennen.
-
Ich habe mehrere News-Seiten auf meiner eigenen Webseite, hier habe ich bei den Bildern fast das gleiche gebaut.
Leider sind "fremde Links" nicht gewünscht, und somit möchte ich hier auch meine Seite(n) nicht gerne "bewerben", jedoch kann ich Ihnen gerne den Code mitteilen, mit diesem kann man Bilder vergrößern:
Alles anzeigenCode- img {
- width: 50%;
- height: auto;
- padding: 3%;
- -webkit-transition: ease-in-out 0.9s all !important;
- -moz-transition: ease-in-out 0.9s all !important;
- -ms-transition: ease-in-out 0.9s all !important;
- -o-transition: ease-in-out 0.9s all !important;
- transition: ease-in-out 0.9s all !important;
- -webkit-border-radius: 10px 10px 10px 10px;
- -moz-border-radius: 10px 10px 10px 10px;
- -ms-border-radius: 10px 10px 10px 10px;
- -o-border-radius: 10px 10px 10px 10px;
- border-radius: 10px 10px 10px 10px;
- border: 1px dotted #999999; }
- img:hover {
- -webkit_transform: scale( 1.08, 1.14 );
- -moz-transform: scale( 1.08, 1.14 );
- -ms-transform: scale( 1.08, 1.14 );
- -o-transform: scale( 1.08, 1.14 );
- transform: scale( 1.08, 1.14 );
- background-color: #999999; }
- </style>
- <img src="bild.jpg" alt="" />
Wenn fragen sind, gerne her damit, ich bin selbst an CSS interessiert.
Liebe Grüße, Patrick
-
Ich habe mehrere News-Seiten auf meiner eigenen Webseite, hier habe ich bei den Bildern fast das gleiche gebaut.
Leider sind "fremde Links" nicht gewünscht, und somit möchte ich hier auch meine Seite(n) nicht gerne "bewerben", jedoch kann ich Ihnen gerne den Code mitteilen, mit diesem kann man Bilder vergrößern:
Hallo Patrik, die Frage von blaubär war nicht, wie vergrößere ich ein Image durch hovern, sondern dass beim Überfahren mit der Maus der Textstelle 'das aktuelle Bild - Blaue Formen' dieses Bild aufpoppt.
-
Veralbern können wir uns alleine!
https://www.google.de/search?q=bild+bei+mouseover+vergrößern
1. Treffer!!!
Und genau diese Lösung hat er nicht gesucht!
-
Ist aber eine gute Grundlage, um selbst drauf zu kommen. Im Grunde reicht ein kleine Abwandlung:
Positionierung und Styling lasse ich hier der Übersicht halber mal weg, dürfte aber alles problemlos in CSS funktionieren.
-
Hallo Patrik, die Frage von blaubär war nicht, wie vergrößere ich ein Image durch hovern, sondern dass beim Überfahren mit der Maus der Textstelle 'das aktuelle Bild - Blaue Formen' dieses Bild aufpoppt.
Vielen dank für deine Info, dann habe ich leider etwa falsches verstanden.
Dann sucht er möglicherweise ein "Tooltipp", mit soetwas habe ich mir eine ganze Bilder-Galerie erstellt, weil ich auf Javascript so gut wie möglich verzichten wollte.Mit einem sogenannten CSS-"Tooltip" kann er auch Bilder aufpoppen lassen, diese benötigen kein Javascript, und eignen sich hervorragend für solche Projekte.
Ich habe mir auch mehrere Dropdown-Menüs mit solchen "Tooltipps" erstellt....
Gerne nenne ich einen selbsterstellten CSS/Html-Code von einem solchen "Tooltipp", hier ist das Bild schon mit eingebaut und man muss nur noch die URL des Bildes ändern.
LG, Patrick
Edit: Hier mein Code des Tooltip-Fenster:
Alles anzeigenCode- <style type="text/css">
- /* Text, der berührt werden soll */
- .tooltip {
- font-size: 14px;
- color: chocolate;
- cursor: help;
- margin: 20px 2% 0px 2%;
- display: inline-block; }
- /* Tooltip Fenster */
- .tooltip span {
- width: 50%;
- height: auto;
- position: absolute;
- padding: 10px 10px 10px 10px;
- background-color: #FFFFFF;
- border-radius: 15px 15px 15px 0px;
- box-shadow: 2px 2px 12px 2px #aaaaaa;
- visibility: hidden; }
- .tooltip:hover span {
- visibility: visible; }
- .tooltip img {
- width: 100%; }
- </style>
- <div class="tooltip">zum Bild<span> zum verlassen des Bildes oder Videos bitte mit der Maus/ dem Finger den Rand außen berühren oder Seite neuladen: <img src="Bild.png" alt="Bild-Beschreibung" /></span></div>
-
Hi,
meine Frage passt nur bedingt hierher...
Falsch, passt überhaupt nicht hier her. Bitte keine Threads kapern, sondern einen neuen Thread eröffnen.
-
Ich weiß auch ehrlich gesagt nicht, ob die Bilder hier so rein gehören...
-
srry
-
Das mit den Bildgrößen sollte dein zweites Problem sein, denn im Code sind derart viele Fehler, dass du Gefahr läufst, dass bei der Darstellung der Seite überhaupt nichts mehr passt... siehe dazu das Validator-Ergebnis:
https://validator.w3.org/nu/?d…lerie_hector_haeckel.html
Rein optisch zu erkennen auch an zB dem horizontalen Scrollbalken und im oberen Bereich an der nach rechts herausragenden Linie.
Das Problem mit der Bildgröße sollte sich durch die Formatierung 'background-size: contain;' beheben lassen.