ComputerBase Menü
Aktuelles

css Lösung

M

maxnax

Newbie
Registriert
Jan. 2022
Beiträge
5
hallo,

ich suche eine Lösung für meine website um Vorschaubilder bei Projekten zu bekommen wenn man mouseovert.
ich weis das eine bessere Lösung mit java wäre, verstehe aber nur ein bisschen html/css...
Ich habe es bisher bei den ersten zwei Projekten geschafft aber es funktioniert nicht so wie ich es mir vorstelle,
vllt wisst ihr ja wie es geht?

Das Vorschau bild sollte immer die selbe position haben, egal über welchen Titel man geht.

bisher sieht es so aus:

www.maxwencelides.de/hallo.html

der code ist:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
  <title>XHTML 1.0</title>
  <style type="text/css">
  a img {
  border:0;
  width:0;
  height:0;
  }
 
  a:hover img {
  position:absolute;
  left:350px;
  width:auto; 500px;  /* Originalgröße */
  height:500px;
  }
 
  a:hover {
  background:none; /* IE */
  }
  </style>
 </head>
</html>


und jeder link mit vorschaubild ist dann so gecodet:

Code: 
<p><a href="column.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.7em; line-height: 1.9em; color: grey;" href="#"><img src="column.jpeg" alt="Bild" />column</a></p>

Vielen Dank im Voraus, wäre über jede Hilfe dankbar.
Grüße
Ergänzung ()

AH und die maximal breite sollte immer 500px
und bei Höhe auch 500px haben
 
Zuletzt bearbeitet:
Also Grundsätzlich bearbeite bitte deinen Beitrag und lagere den Code in Code Tags ein, dann ist er auch besser lesbar.

Zweitens: Java im Frontend gibt es nicht mehr. Wahrscheinlich meinst du JavaScript.

Drittens: nutzt du offenbar für die einfachsten Sachen die man mit CSS machen könnte bereits JavaScript z.b. "onmouseover" statt CSS :hover.

Und letztens verstehe ich nicht genau was dein Problem ist, bei mir scheint dein Link zu funktionieren, wenn ich mir der Maus über den Begriff "ihctetu" fahre wird ein Bild eingeblendet.

Bildschirmfoto 2022-01-13 um 14.28.28.png
 
  • Gefällt mir
Reaktionen: maxnax
Hallo, vielen dank für die Antwort.

ja genau funktionieren tut es schon. aber irgendwie funktioniert hier kein max-width oder height:

Code: 
a:hover img {
position:absolute;
left:350px;
width:auto; /* Originalgröße */
height:500px;
}

also ich möchte es eigentlich so haben:


a:hover img {
position:absolute;
left:350px;
max-width:500px; /* Originalgröße */
max-height:500px;
}


aber da kommt dann gar kein bild mehr...

und die position des Bildes sollte immer die gleiche sein / bei jedem Projekt über das man mouseovert
 
Zuletzt bearbeitet:
So bitte anfragen:
Code: 
a:hover img {
position:absolute;
left:350px;
width:auto; 500px; /* Originalgröße */
height:500px;
}

also ich möchte es eigentlich so haben:


a:hover img {
position:absolute;
left:350px;
max-width:500px; /* Originalgröße */
max-height:500px;
}
 
  • Gefällt mir
Reaktionen: maxnax
@maxnax Da ich heute gerade einen guten Tag und etwas Zeit habe kaue ich mal Code vor.

Ich hab dir hier ein kleines Code Beispiel zusammengebaut wie das ganze mit ordentlichem CSS, viel weniger HTML Code und ein bisschen JavaScript funktionieren kann.

Achte bitte grundsätzlich auf deine HTML Ausgabe, wenn ich mir den Quelltext deines Links anschaue hast du zwei verschiedene Doctypes, beginnst 2x mal mit <html> sowas geht nicht und verwirrt am Ende nur die Browser und Suchmaschinen.

Ich würde mir das "Hover" Konzept aber insgesamt nochmal durch den Kopf gehen lassen. Das Internet ist heute hauptsächlich Mobil (Smartphone und Tablets).

Die meisten Menschen nutzen keine Maus am Handy, darum gibt es dort auch keinen Hover Effekt. Sprich das funktioniert dort nicht, so hättest du eine Webseite die Mobil und Desktop unterschiedlich funktioniert und das ist definitiv nicht "state of the art"

Hier der Link: https://jsfiddle.net/ujLedhvz/2/
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: PHuV, maxnax und NameHere
Zusätzlich zum hover könnte mit :target und passenden anker-links zum bild mobil optimiert werden ohne weiteres Javascript.

Edit: naja, das passt hier nicht wirklich weil die links ja wo anders hingehen. Würde ich mobil ersatzlos streichen.
 
  • Gefällt mir
Reaktionen: kim88
danke das sieht doch super hilfreich aus. ich probier es gleich mal aus! Danke für die Mühe @kim88
 
ok , also es funktioniert echt super. danke schon mal dafür!
das einzige problem ist, das meine links jetzt nicht mehr funktionieren... wisst ihr woran es liegen könnte?
habe es jetzt nur bei "column" ausprobiert...

HTML: 
<!DOCTYPE html>
<html>
<body>

  <head>
      <style>
          a {
  color: grey;
}

a:hover {
  color: black;
}
ul{
  position:relative;
  height:100%;
}
ul li{
  width:30%;
}
ul img{
  display:block;
  position:absolute;
  right:110px;
  top:20px;
  width:70%;
  height: auto;
  opacity:0;
  visibility:hidden;
  transition:all ease 150ms;
}
ul a:hover + img{
  opacity:1;
  visibility:visible;
}
      </style>
    
    <title>max wencelides</title>

    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <div style="margin-left:50px;
                margin-top:40px;
                margin-right:50px">



  
  <font face="Helvetica">

 <div style="text-align:left; float:left;"><a style="text-decoration: none; font-size: 2.5em; color: grey;"; href="index.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" >max wencelides</a></div>
        
<div style="text-align:right;"><a href="index.html"; style="text-decoration: none; margin-left: 0.0em; font-size: 2.2em; line-height: 1.3em; color: black;" >works</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="About.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'"; style="text-decoration: none; margin-left: 0.0em; font-size: 2.2em; line-height: 1.3em; color: grey;" >about</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <a href="contact.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; margin-left: 0.0em; font-size: 2.2em; line-height: 1.3em;  color: grey;">contact</a></div>
  
        
      
<p> &nbsp;</p>
<p> &nbsp;</p>
<p> &nbsp;</p>
<p> &nbsp;</p>
      <p> &nbsp;</p>
      <p> &nbsp;</p>
      <p> &nbsp;</p>
      <p> &nbsp;</p>
<ul>
  <a class="link" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.2em; line-height: 1.8em; color: grey;" href="column.html">column</a><img src="column.jpeg" loading="lazy" />
    <p> &nbsp;</p>
    <a class="ihctetu.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.2em; line-height: 1.8em; color: grey;" href="#">ihctetu</a><img src="ansicht 1.jpg" loading="lazy" />
    <p> &nbsp;</p>
    <a class="room3.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.2em; line-height: 1.8em; color: grey;" href="#">room 3</a><img src="room3_6.jpg" loading="lazy" />
    <p> &nbsp;</p>
     <a class="wall.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.2em; line-height: 1.8em; color: grey;" href="#">wall</a><img src="wall12copy.jpg" loading="lazy" />
    <p> &nbsp;</p>
    <a class="sunglo.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.2em; line-height: 1.8em; color: grey;" href="#">sun glo</a><img src="mitte1.jpg" loading="lazy" />
    <p> &nbsp;</p>
    <a class="book.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.2em; line-height: 1.8em; color: grey;" href="#">books</a><img src="Booksfull.jpg" loading="lazy" />
    <p> &nbsp;</p>
    <a class="egoboost.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.2em; line-height: 1.8em; color: grey;" href="#">egoboost</a><img src="Egoboost2.jpg" loading="lazy" />
    <p> &nbsp;</p>
    <a class="rubber.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.2em; line-height: 1.8em; color: grey;" href="#">rubber</a><img src="Forever4.jpg" loading="lazy" />
    <p> &nbsp;</p>
    <a class="jetzt.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.2em; line-height: 1.8em; color: grey;" href="#">jetzt</a><img src="jetztneu.jpg" loading="lazy" />
    <p> &nbsp;</p>
    <a class="shoes.html" "" onmouseover="this.style.color='black'" onmouseout="this.style.color='grey'" style="text-decoration: none; font-size:2.2em; line-height: 1.8em; color: grey;" href="#">shoes</a><img src="schuhe.JPG" loading="lazy" />
    <p> &nbsp;</p>
</ul>
  



  <p> &nbsp;</p>
  <p> &nbsp;</p>
  <p> &nbsp;</p>
    
    

        <p> &nbsp;</p>
        <p> &nbsp;</p>
      
        <p> &nbsp;</p>


</body>
</html>
 
"<a class="ihctetu.html""

Das kann nicht funktionieren. Das Link-Ziel gehört in ein "href" Attribute..
 
  • Gefällt mir
Reaktionen: PHuV, maxnax und Innensechskant
autsch. danke!
Ergänzung ()

ok letzte frage: wie bekomme ich bei column das Vorschaubild auf die richtige größe, so das es nicht 1000px zu weit unten hängt? danke im Voraus
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

N
(HTML) Bild verschwindet hinter live Hintergrund
Antworten
2
Aufrufe
757
funkmasterflow
funkmasterflow
N
Bilder wird oben an der Suchleiste abgeschnitten (HTML/CSS)
Antworten
3
Aufrufe
941
Janush
Janush
D
css nth frage
Antworten
8
Aufrufe
715
D0bby
D
M
HTML iframe übernimmt kein CSS im Mutter-Dokument
Antworten
15
Aufrufe
1.320
netzgestaltung
netzgestaltung
T
JavaScript Offcanvas "Zurück-Button" 3-stufig
Antworten
8
Aufrufe
854
tel6
T
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz