Hallo leute,
ich Arbeite an einer Fan Page mit Spiele Guide und würde gerne meine verwendeten Javascript in einer .js deitei haben wie ich wie ein binde ist nur bewust doch habe ich keine plan wie ich das in der datei screiben muss.
HTML
Code
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
a img {
border:none;
}
.card_overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
}
.card_content {
display: none;
position: absolute;
height:600px;
width:305px;
top: 50%;
left: 50%;
margin-top: -258px;
margin-left: -156px;
padding: 6px;
z-index: 1002;
overflow: auto;
}
#card_icons {
width:299px;
border:0;
}
.card_case {
background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
background-repeat: no-repeat;
height:435px;
width:299px;
border:0;
}
.switch_card {
position:relative;
z-index:1003;
margin-top:-235px;
margin-left:-5px;
}
#back_to {
position:relative;
z-index:1003;
margin-top:203px;
margin-left:0px;
}</style>
<table>
<tbody>
<tr>
<td>
<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" /></a> <a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" /></a>
</td>
</tr>
</tbody>
</table>
<div class="card_content" id="card1">
<table id="card_icons">
<tbody>
<tr>
<td align="left" width="80">
<img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" /><font color="white"> 1/20</font>
</td>
<td align="left" width="60">
<img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" /><font color="white"> 0/ 2</font>
</td>
<td align="right">
<img src="http://file2.npage.de/014720/85/bilder/ur.png" />
</td>
</tr>
</tbody>
</table>
<table class="card_case">
<tbody>
<tr>
<td align="center" valign="middle">
<img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png" />
</td>
</tr>
</tbody>
</table>
<div class="switch_card">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left">
<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/links2a.gif" /></a>
</td>
<td>
</td>
<td align="right">
<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" /></a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="back_to">
<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a>
</div>
</div>
<div class="card_content" id="card2">
<table id="card_icons">
<tbody>
<tr>
<td align="left" width="80">
<img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" /><font color="white"> 2/20</font>
</td>
<td align="left" width="60">
<img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" /><font color="white"> 0/ 2</font>
</td>
<td align="right">
<img src="http://file2.npage.de/014720/85/bilder/ur.png" />
</td>
</tr>
</tbody>
</table>
<table class="card_case">
<tbody>
<tr>
<td align="center" valign="middle">
<img src="http://file2.npage.de/014720/85/bilder/big_des_kaenguru.png" />
</td>
</tr>
</tbody>
</table>
<div class="switch_card">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left">
<a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card1').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off"><img class="anime" src="http://file2.npage.de/014720/85/bilder/links2.a.gif" /></a>
</td>
<td>
</td>
<td align="right">
<a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card1').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off"><img class="anime2" src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" /></a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="back_to">
<a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='none';document.getElementById('fade').style.display='none'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a>
</div>
</div>
<div class="card_overlay" id="fade">
</div>
Alles anzeigen