blackisthecolour: Feste Bildpostion bei onmouseover

SELF-Forum

Feste Bildpostion bei onmouseover

blackisthecolour
– Informationen zu den Bewertungsregeln

Hallo Forum,

bekomme langsam graue Haare mit einem 'onmouseover-Problem'.

Der folgende Teil funktioniert soweit:

  1. CSS:

#inhalt {

background:url(../bilder/body2_cam.jpg) no-repeat;
    height:475px;
    width:1050px;
    font-size:20px;
    padding-left:2em;
    }

* {

margin:0;
    padding:0;
    }

.cam1{
float:right;
border:1px solid #99ccff;
margin:150px 300px 0px 00px;
}

.cam2{
float:right;
border:1px solid #99ccff;
margin:400px 80px 0px 00px;
}

  1. HTML:

<div id="inhalt">

<p>
<img class="cam1" onmouseover="(src='bilder/test1.gif')" onmouseout="(src='bilder/test2.jpg')" src="bilder/test2.jpg" alt="Freihantelbereich"></img>
</p>

Ich bekomme es aber nicht in den Griff, dem bei onmouseover aufgerufenen Bild 'test1' (und nur diesem !!) eine feste Position zuzuweisen.

Alle Versuche, die Position (oder Größe) zu ändern, wirkten sich auf alle beteiligten Bilder aus. Für mich ist es jedoch wichtig, nur auf 'test1' einzuwirken.

Vielen Dank für eventuelle Tips

Jörg

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Feste Bildpostion bei onmouseover

    Hansi
    – Informationen zu den Bewertungsregeln

    bekomme langsam graue Haare mit einem 'onmouseover-Problem'.

    Haare färben bringts ;)

    <img class="cam1" onmouseover="(src='bilder/test1.gif')" onmouseout="(src='bilder/test2.jpg')" src="bilder/test2.jpg" alt="Freihantelbereich"></img>

    Was versuchst du hier? Diese Methode scheint falsch zu sein.
    onmouseout="this.src='bilder/test2.jpg'"

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Feste Bildpostion bei onmouseover

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Alle Versuche, die Position (oder Größe) zu ändern, wirkten sich auf alle beteiligten Bilder aus. Für mich ist es jedoch wichtig, nur auf 'test1' einzuwirken.

    In deinem Code ist weder ein Bild zu sehen, dass über einen solchen Bezeichner irgendwie identifizierbar wäre, noch was du versucht hast.

    Bitte lese nach, wie man Probleme nachvollziehbar beschreibt.

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Feste Bildpostion bei onmouseover

      blackisthecolour
      – Informationen zu den Bewertungsregeln

      Hi,

      Alle Versuche, die Position (oder Größe) zu ändern, wirkten sich auf alle beteiligten Bilder aus. Für mich ist es jedoch wichtig, nur auf 'test1' einzuwirken.

      In deinem Code ist weder ein Bild zu sehen, dass über einen solchen Bezeichner irgendwie identifizierbar wäre, noch was du versucht hast.

      Bitte lese nach, wie man Probleme nachvollziehbar beschreibt.

      MfG ChrisB

      Hallo ChrisB,

      sorry, wenn ich mich unverständlich bzw. unvollständig ausgedrückt habe. Wollte mich nur kurz und prägnant ausdrücken, was wohl nicht geklappt hat.
      Ich versuchs noch mal:

      Mit meinem beschriebenen Code

      <img class="cam1" onmouseover="(src='bilder/test1.gif')" onmouseout="(src='bilder/test2.jpg')" src="bilder/test2.jpg" alt="Freihantelbereich"></img>

      habe ich das Ergebnis, dass das Bild 'test2.jpg' bei onmouseover in das Bild 'test1.gif' überführt wird und bei onmouseout wieder zurück zu Bild 'test2.jpg'. Soweit ist ja alles prima.
      Jetzt möchte ich erreichen(ohne irgendwas bei Bild 'test2.jpg' zu verändern), dass das bei onmouseover erscheinende Bild 'test1.gif' eine festgelegte Position im Browser einnimmt.
      Bislang wird es nach unten links dargestellt, was dazu führt, dass es nur teilweise sichtbar ist und gescrollt werden muss, um es vollständig zu sehen. Ich hätte es gern zentral.

      Hier der komplette Code:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

      <head>

      <title>test</title>

      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <meta name="description" content="" />
          <meta name="author" content="" />
          <meta name="keywords" content="" />
          <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

      <link href="css/camsight.css" type="text/css" rel="stylesheet" />

      <style type="text/css">

      <!--

      #kopfbereich {

      background:url(../bilder/head.jpg) no-repeat;
          height:116px;
          width:800px;
          }

      #steuerung {

      background-color:#C8BCBA;
          height:40px;
          width:800px;
          word-spacing:2.0em;
          padding-left:5em;
          padding-top:0.7em;
          }

      #inhalt {

      background:url(../bilder/body2_cam.jpg) no-repeat;
          height:475px;
          width:800px;
          font-size:20px;
          padding-left:2em;
          }

      * {
          margin:0;
          padding:0;
          }

      .cam1{

      border:1px solid #99ccff;
      margin:300px 0px 0px 200px;
      }

      -->
      </style>

      </head>

      <body>

      <div id="kopfbereich">

      </div>

      <div id="steuerung">

      <a href="index.html"  ><font color="#484340">STARTSEITE</a>

      </div>

      <div id="inhalt">

      <p> <img class="cam1" onmouseover="(src='bilder/test1.gif')" onmouseout="(src='bilder/test2.jpg')" src="bilder/test2.jpg" alt="Kardiiobereich"></img></p>

      </div>

      </body>

      </html>

      Anzumerken ist vielleicht noch, dass test2.jpg ein Kamerasymbol ist, test1.gif ein Foto mit entsprechend größeren Ausamßen. Daher das Problem.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln