nicht angemeldet
Viewpoint wird bei sichtbarmachen eines div nach oben verschoben
Der MartinHallo,
ich bin dabei eine Internetseite zu erstellen in der eine imagemap integriert ist. wenn man auf eine person klickt wird darunter ein div sichtbar in dem ein einzelbild ist und infos zu der person. das problem ist das mein viewpoint sobald ich eine person anklicke ganz nach oben verschoben wird und ich erst nach unten scrollen muss um die infos zu sehen. Ich bin total ratlos woran das liegen könnte... Hier mal der Link zur seite: http://imageofthesun.funpic.de/band.html#
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title>Band</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main">
<div id="head">
</div>
<div id="info">
<div id="menu"><?php include("menu.php"); ?>
</div>
<div id="band">
<img src="normal.jpg" id="bd" alt="HTML Map"
border="0" usemap="#tutorials"/>
<map name="tutorials">
<area id="lisa" shape="rect"
coords="500,0,750,350"
href="#" alt="lisa"
target="_self"
/>
<area id="robert" shape="rect"
coords="300,50,450,350"
href="#" alt="robert"
target="_self"
/>
<area id="stefan" shape="rect"
coords="150,100,270,350"
href="#" alt="stefan"
target="_self"
/>
<area id="kevin" shape="rect"
coords="0,150,130,350"
href="#" alt="kevin"
target="_self"
/>
</map>
<div id="steckbrief">
<img src="lisa.JPG" id="bild" name="portrait">
<p id="text">
hier steht jetzt was wenn snicht klappt
</p>
</div>
</div>
</div>
</div>
</body>
</html>
/*
Document : style
Created on : 09.09.2013, 23:20:46
Author : Kevin Schramm
Description:
Purpose of the stylesheet follows.
*/
body{
height: 100%;
width: 100%;
background:url(bg.jpg);
background-position: center top;
background-repeat: no-repeat; background-attachment:fixed;
}
#main{
height:800px;
width: 980px;
margin:auto;
}
#head{
background:url(head.jpg);
background-size: 985px;
margin-top:-8px;
width: 985px;
height:300px;
float: top;
box-shadow:2px 10px 10px 1px ivory;
}
#info{
float: bottom;
height:500px;
width: 885px;
}
#menu{
margin-top:0px;
width:878px;
height: 50px;
text-align: center;
float: bottom;
}
#menu ul{
margin-top:0px;
list-style-type: none;
padding:10px;
}
#menu li{
display: inline;
background-color:black;
padding-right:35px;
padding-left:35px;
padding-top: 5px;
padding-bottom: 5px;
border:grey 3px ridge;
border-radius: 5px;
font-weight: bold;
cursor:default;
}
#menu a{
margin-top:20px;
margin-bottom: 20px;
text-decoration: none;
color: beige;
}
#menu li:hover{/*gilt nur wenn cursor drüber geht*/
border: yellow 3px inset;
}
#menu a:hover{
color:yellow;
text-shadow:none;
}
#band{
width: 800px;
margin: auto;
margin-top: 60px;
padding-bottom:100px;
}
#band img{
width: 800px;
border: whitesmoke;
border-radius:10px;
}
#steckbrief{
width: 800px;
height:300px;
visibility: hidden;
}
#steckbrief img{
float: left;
width: 500px;
border-radius:0px;
}
#steckbrief p{
float: top;
}
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
window.onload=init;
function init(){
document.getElementById("lisa").onclick= function(){
document.getElementById("steckbrief").style.visibility="visible";
document.images["portrait"].src="lisa.jpg";
document.getElementById("text").innerHTML="hier steht was über Lisa";
} ;
document.getElementById("robert").onclick= function(){
document.getElementById("steckbrief").style.visibility="visible";
document.images["portrait"].src="rb.jpg";
document.getElementById("text").innerHTML="hier steht was über robert";
} ;
document.getElementById("stefan").onclick= function(){
document.getElementById("steckbrief").style.visibility="visible";
document.images["portrait"].src="stefan.jpg";
document.getElementById("text").innerHTML="hier steht was über stefan";
} ;
document.getElementById("kevin").onclick= function(){
document.getElementById("steckbrief").style.visibility="visible";
document.images["portrait"].src="kevin.jpg";
document.getElementById("text").innerHTML="hier steht was über kevin";
} ;
}
-
Hi,
ich bin dabei eine Internetseite zu erstellen in der eine imagemap integriert ist. wenn man auf eine person klickt wird darunter ein div sichtbar in dem ein einzelbild ist und infos zu der person. das problem ist das mein viewpoint sobald ich eine person anklicke ganz nach oben verschoben wird und ich erst nach unten scrollen muss um die infos zu sehen.
<map name="tutorials">
<area id="lisa" shape="rect"
coords="500,0,750,350"
href="#" alt="lisa"
target="_self"
/>
<area id="robert" shape="rect"
coords="300,50,450,350"
href="#" alt="robert"
target="_self"
/>
<area id="stefan" shape="rect"
coords="150,100,270,350"
href="#" alt="stefan"
target="_self"
/>
<area id="kevin" shape="rect"
coords="0,150,130,350"
href="#" alt="kevin"
target="_self"
/></map>
und das überrascht dich, wo du doch mit href="#" den Anfang des Dokuments als Linkziel angibst? > ~~~javascript window.onload=init; > > function init(){ > document.getElementById("lisa").onclick= function(){ > document.getElementById("steckbrief").style.visibility="visible"; > document.images["portrait"].src="lisa.jpg"; > document.getElementById("text").innerHTML="hier steht was über Lisa"; > } ; > [...] > }Wenn du nicht willst, dass die Standardaktion des area-Elements (einem Link folgen) ausgelöst wird, solltest du sie verhindern, indem der onclick-Handler false zurückgibt.
So long,
Martin--
F: Was sagt der große Keks zum kleinen Keks?
A: Du kannst dich jetzt verkrümeln.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(