Mouseover auf Bildteilen

Status
Nicht offen für weitere Antworten.
P

Purzely

Grünschnabel
Hallo liebe WebGemeinde,
ich bin die Neue (manchmal blond) und komm bestimmt oefters vorbei :rolleyes:

Ich hab folgendes Problem
vorhergesagt sei, ich kann zwar ne HP mache....denk ich mal....
aber nu weiss ich nicht weiter.
Ich habe ein Klassenfoto und wenn ich ueber die einzelnen Köpfe mit der Maus gehe, wollte ich die Namen anzeigen lassen.
Nur hab ich keine Ahnung wie. :confused:
Ich hoffe ihr koennt mir da weiterhelfen.
danke schonmal sagt Purzely

Ich arbeite mit FrontPage 2003
und dem Grafiki PSP9
meine HP: http://www.pspfantasy.bplaced.net/
 
Hallo Maik,
vielen lieben Dank feur deine fixe Antwort,
genau so was hab ich gemeint.
Aber in Ermanglung von Englisch kann ich nix damit anfangen
Brauch ich nu da nen Code dazu oder wie funktionierts?
Bin halt doch mal wieder blond
liebe Gruesse Purzely
 
Hi,

die relevanten / erforderlichen Komponenten findest du im Quellcode der Seite.

Code: 
<style type="text/css">

#info {padding:2em 0;}

/* Snow White and the seven dwarfs */

#imap {display:block; width:400px; height:240px; background:url(../img/snow_off.jpg); position:relative; margin:0 auto 2em auto;}

#imap a#titlex {display:block; width:400px; height:0; padding-top:240px; overflow:hidden; position:absolute; left:0; top:0; background:transparent cursor:default;}
* html #imap a#titlex {height:240px; he\ight:0;}

#imap a#titlex:hover {background: #fff url(../img/snow_on.jpg) no-repeat 0 0;}

a#snowwhite {display:block; width:80px; height:0; padding-top:80px; overflow:hidden; position:absolute; left:170px; top:0; background:transparent}

a#snowwhite:hover {background:#fff url(../img/snow_white.jpg) no-repeat 0 0;}

a#sleepy, a#happy, a#doc, a#dopey, a#grumpy, a#bashful, a#sneezy {display:block; width:60px; height:0; padding-top:80px; overflow:hidden; position:absolute;}

* html a#snowwhite, * html a#sleepy, * html a#happy, * html a#doc, * html a#dopey, * html a#grumpy, * html a#bashful, * html a#sneezy {height:80px; he\ight:0;}

a#sleepy {left:10px; top:120px; background:transparent;}
a#happy {left:80px; top:110px; background:transparent;}
a#doc {left:130px; top:100px; background:transparent;}
a#dopey {left:180px; top:110px; background:transparent;}
a#grumpy {left:240px; top:100px; background:transparent;}
a#bashful {left:290px; top:120px; background:transparent;}
a#sneezy {left:340px; top:110px; background:transparent;}

a#sleepy:hover {background:#fff url(../img/sleepy.jpg) no-repeat 0 0;}
a#happy:hover {background:#fff url(../img/happy.jpg) no-repeat 0 0;}
a#doc:hover {background:#fff url(../img/doc.jpg) no-repeat 0 0;}
a#dopey:hover {background:#fff url(../img/dopey.jpg) no-repeat 0 0;}
a#grumpy:hover {background:#fff url(../img/grumpy.jpg) no-repeat 0 0;}
a#bashful:hover {background:#fff url(../img/bashful.jpg) no-repeat 0 0;}
a#sneezy:hover {background:#fff url(../img/sneezy.jpg) no-repeat 0 0;}

</style>
Code: 
<div id="info">

<h2>CSS image maps</h2>

<h3>Map #1</h3>
<dl id="imap">
<dt><a id="titlex" href="#nogo">Snow white and the seven dwarfs</a></dt>
<dd><a id="snowwhite" title="Snow White" href="snowwhite.html">Snow White</a></dd>
<dd><a id="sleepy" title="Sleepy" href="sleepy.html">Sleepy</a></dd>
<dd><a id="happy" title="Happy" href="happy.html">Happy</a></dd>
<dd><a id="doc" title="Doc" href="doc.html">Doc</a></dd>
<dd><a id="dopey" title="Dopey" href="dopey.html">Dopey</a></dd>
<dd><a id="grumpy" title="Grumpy" href="grumpy.html">Grumpy</a></dd>

<dd><a id="bashful" title="Bashful" href="bashful.html">Bashful</a></dd>
<dd><a id="sneezy" title="Sneezy" href="sneezy.html">Sneezy</a></dd>
</dl>

</div>
Code: 
<style type="text/css">

#imap {display:block; width:300px; height:210px; background:url(masters/back.jpg) no-repeat; position:relative; margin:10px 0 10px 75px;}

#imap a#painting {display:block; width:300px; height:0; padding-top:210px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(masters/small.jpg) no-repeat 300px 210px; cursor:default;}
* html #imap a#painting {height:210px; he\ight:0;}

#imap a#painting:hover {background-position: 0 0; z-index:10;}

#imap dd {position:absolute; padding:0; margin:0;}
#imap #man {left:10px; top:50px; z-index:20;}
#imap #donkey {left:120px; top:80px; z-index:20;}
#imap #child {left:190px; top:20px; z-index:20;}

#imap a#link_man {display:block; width:58px; height:58px; text-decoration:none; z-index:20;}
#imap a#link_donkey {display:block; width:58px; height:68px; text-decoration:none; z-index:20;}
#imap a#link_child {display:block; width:48px; height:88px; text-decoration:none; z-index:20;}

#imap a em {display:none;}

#imap a span, #imap a:visited span {display:none;}

#imap a#link_man:hover, #imap a#link_donkey:hover, #imap a#link_child:hover {border:1px solid #fc0;}

#imap a:hover span {position:absolute; display:block; color:#000; width:330px; height:270px; line-height:1.8em; font-size:0.9em; text-align:justify;}

#imap a#link_man:hover span {left:310px; top:-50px;}
#imap a#link_man:hover em {position:absolute; display:block; left:60px; top:30px; width:250px; height:1px; overflow:hidden; font-size:1px; background:#f00;}
#imap a#link_donkey:hover span {left:200px; top:-80px;}
#imap a#link_donkey:hover em {position:absolute; display:block; left:60px; top:35px; width:140px; height:1px; overflow:hidden; font-size:1px; background:#f00;}
#imap a#link_child:hover span {left:130px; top:-20px;}
#imap a#link_child:hover em {position:absolute; display:block; left:50px; top:45px; width:80px; height:1px; overflow:hidden; font-size:1px; background:#f00;}

#imap a:hover span img {float:left; margin-right:1em; margin-bottom:0.5em; border:1px solid #000;}

#imap a span:first-line {font-weight:bold; font-style:italic;}
#info h3 {margin:0 0 0 75px; font-size:1.2em; font-weight:normal; font-family:georgia, "times new roman", serif; letter-spacing:0.1em; padding-bottom:5px; border-bottom:1px solid #aaa; width:650px;}
#info .para {width:300px; margin:0 0 0 75px;}


</style>
Code: 
<div id="info">

<h2>Image map for detailed information</h2>

<h3>Jacopo Bassano - The Flight into Egypt</h3>
<dl id="imap">
<dt><a id="painting" href="#nogo" title="Old Master">An Old Master</a></dt>
<dd id="man"><a id="link_man" title="Old Man" href="#nogo"><em></em><span><img src="masters/man.jpg" alt="Old Man - close-up" title="Old Man - close-up" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nonummy pede vitae lectus. In sagittis, justo quis auctor adipiscing, massa sapien lacinia ipsum, at sollicitudin est justo sed orci. Phasellus quam. Duis nec lorem quis erat feugiat ultricies. Pellentesque quis purus eu massa lobortis pulvinar. Nullam sed quam vel nisi. Fusce ultricies volutpat sem. Suspendisse ac lorem sit amet est condimentum scelerisque.</span></a></dd>
<dd id="donkey"><a id="link_donkey" title="Donkey" href="#nogo"><em></em><span><img src="masters/donkey.jpg" alt="The Donkey - close-up" title="The Donkey - close-up" />Cras pulvinar nisl a magna. Vestibulum turpis. Maecenas dignissim, libero id pulvinar luctus, lacus augue ullamcorper quam, at viverra orci tortor eget velit. Suspendisse potenti. Duis pharetra, tortor quis consectetuer ornare, odio ipsum tempor risus, sed convallis velit nunc vel orci. Maecenas facilisis ante ac urna.</span></a></dd>
<dd id="child"><a id="link_child" title="Mother and Child" href="#nogo"><em></em><span><img src="masters/child.jpg" alt="Mother and Child - close-up" title="Mother and Child - close-up" />Suspendisse vestibulum convallis sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pretium tempus pede. Sed placerat imperdiet enim. Donec convallis dignissim risus. Vivamus molestie sodales quam. Aliquam erat volutpat. Fusce ultricies volutpat sem. Suspendisse ac lorem sit amet est condimentum scelerisque.</span></a></dd>
</dl>
<p class="para">Jacopo Bassano's popular realism was underpinned by his exceptional use of light and characterized by the lifelike quality of the people and details, especially the animals, in his pictures.</p>

</div>

mfg Maik
 
Ach ja Maik, auf die Idee in den QuellCode zu schauen, bin ich natuerlich nich gekommen,
ich werd nu mal versuchen das ganze einzubauen und zu verändern,
falls ich noch Fragen hab, weiss ich ja wo ich dich finde hihihi^^
Danke nochmal
sagt Purzely
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück