Hast du vielleicht ne Möglichkeit oder viellmehr weißt du wie soetwas in CSS aussehen und funktionieren könnte, habe schon ein CSS was auch gut funktioniert, allerdings ist die Position des Bildes fest, schöner wäre es, wenn diese genauso geladen werden konnen wie im JS.
Die Bilder sind die Gleichen.
nein, auch hierbei sind diese störenden kleinen bilderchen.
Lieber wäre mir dieses natürlich als CSS, aber da bin ich zublöd zu.
Super, tausend dank.
moin,
wie kann ich denn hier was raufladen?
Servus,
hab ein großes Problem, mein Javascript funktioniert sehr gut doch...es wird beim überfahren der Thumbs von einem zum anderen so ein kleines Bildchen angezeigt, habe alles ausprobiert, es liegt definitiv am Script.
HTML
<html>
<head>JS
<script type="text/javascript">
<!--
function picDivShow(imgPath) {
varPicDivImg = document.all.picDivImg;
varPicDivImg.src = imgPath;
varPicDiv = document.all.picDiv;
varPicDiv.style.display = "";
}
function picDivHide() {
varPicDiv = document.all.picDiv;
varPicDivImg.src = 'picload.jpg';
varPicDiv.style.display = "none";
}
function updateMausPosition(e) {
varPicDiv = document.all.picDiv;
x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
if (picDiv != null) {
varPicDiv.style.left = (x + 100) + "px";
varPicDiv.style.top = (y + 20) + "px";
}
}
document.onmousemove = updateMausPosition;
//-->
</script>HTML
<div id="picDiv" style="position: absolute; width: 200px; height: 200px; z-index: 1; display: none;">
<table border="0">
<tr>
<td align="center" bgcolor="#000000">
[img][/img]</td>
</tr>
</table>
</div>
<table border="0" cellpadding="0" cellspacing="10">
<tr>
<td>
[img]klein/01.jpg[/img]
<td>
[img]klein/02.jpg[/img]
</td>
<td>
[img]klein/03.jpg[/img]
</td>
</tr>
<tr>
<td>
[img]klein/04.jpg[/img]
</td>
<td>
[img]klein/05.jpg[/img]
</td>
<td>
[img]klein/06.jpg[/img]
</td>
</tr>
</table>
</body>
</html>Bitte helft mir.
freesy
Danke dir, aber damit wird das Problem nicht gelöst, habe seither viel experimentiert und dieses soweit hin bekommen, habe die CSS auch extern abgespeichert wo drauf zugegriffen wird...hier nur zu veranschaulichen:
CSS
<style type="text/css">
<div class="aussencontainer">
a.info{
position:relative;
z-index:1; background-color:#ccc;
color:#000;
text-decoration:none}
a.info:hover{z-index:2; background-color:#ff0}
a.info span{display: none;}
a.info:hover span{
display:block;
position:absolute;
top:10em; left:40em; width:1em; height:1px;
border:2px solid ccff;
background-color:#cff; color:#000;
text-align: center}
</div>
</style>HTML
[url='#'][img]klein/01.jpg[/img]<span>[img]01.jpg[/img]</span>[/url]
</td>
<td>
[url='#'][img]klein/02.jpg[/img]<span>[img]02.jpg[/img]</span>[/url]
</td>
<td>
[url='#'][img]klein/03.jpg[/img]<span>[img]03.jpg[/img]</span>[/url]Was ich gerne möchte als CSS ist:
JS "onclick" was ich aber nicht will:
<script language="JavaScript">
<!--
var nummer;
bild = new Array("01.jpg","01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg");
function anzeige3(nummer){
fensterchen = window.open("","seite","width=480,height=320,top=100,left=200",screenx="300",screeny="200",menubar="no");
fensterchen.document.open();
fensterchen.document.write("<body topmargin='0' leftmargin='0' marginheight='0' marginwidth='0'>" + "[img]"+bild[nummer]+"[/img]");
fensterchen.document.close();
}
function anzeige4(nummer){
fensterchen = window.open("","seite","width=320,height=480,top=100,left=200",screenx="300",screeny="200",menubar="no");
fensterchen.document.open();
fensterchen.document.write("<body topmargin='0' leftmargin='0' marginheight='0' marginwidth='0'>" + "[img]"+bild[nummer]+"[/img]");
fensterchen.document.close();
}
//-->
</script>HTML
<td width="180" height="120" bgcolor="#000000">[url='#'][img]klein/01.jpg[/img][/url]</td>
<td width="180" height="120" bgcolor="#000000">[url='#'][img]klein/02.jpg[/img][/url]</td>
<td width="180" height="120" bgcolor="#000000">[url='#'][img]klein/03.jpg[/img][/url]</td>Wie du siehst brauche ich im HTML nicht mehr das großeFoto mit größenangaben eintragen, ebenso sind diese im JS-Script eingetragen.
gibt es soetwas als CSS, das wäre zu schön um wahr zu sein.
Hallo alle,
mein voriges Posting blieb leider ohne Antworten.
Ich denke ich bin auf dem richtigen Weg, leider müßte noch einfacher gehen deshalb brauche ich Eure Hilfe.
Ich will die Bildern (Thumbs) beim rüberfahren mit der Maus das das jeweilige (große) Bild in einem immer den gleichen festen positioniertem Fenster (rechter mittiger Bildschirmrand) ohne Rahmen u.d. öffnen lassen.
Allerdings sollte es so sein, das beim verlassen des Thumbs sich das Fenster auch wieder schließt. Und es sollte sich kein vergrößertes Bild verzerren, d.h. das ich zwei verschiedene Formate habe...bsp. 1. 480px x 240px und 2. 280px x 480px, also Hoch -und Querformat.
Hier mein Script was bisher einigermaßen funktioniert allerdings ohne feste angabe des öffnenden Fenster und ohne wie im untersten Script mit "anzeige3" und "anzeige4":
<style type="text/css">
a.info{
position:relative;
z-index:1; background-color:#ccc;
color:#000;
text-decoration:none}
a.info:hover{z-index:2; background-color:#ff0}
a.info span{display: none;
}
a.info:hover span{
display:block;
position:absolute;
top:2em; left:25em; width:5em;
border:1px solid ccff;
background-color:#cff; color:#000;
text-align: center}
</style>
<tr>
<td>
<span>
</span>
</td>
<td>
<span>
</span>
</td>
<td>
<span>
</span>
</td>
</tr>
Ich möchte allerdings was ich schon in einem anderen Script gesehen habe nicht unbeding die Maßangaben der Großbilder mit angeben wie hier in dem volgendem Script zu sehen ist:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE></TITLE>
<script language="JavaScript">
<!--
var nummer;
bild = new Array("01.jpg","01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg");
function anzeige3(nummer){
fensterchen = window.open("","seite","width=480,height=320,top=100,left=200",screenx="300",screeny="200",menubar="no");
fensterchen.document.open();
fensterchen.document.write("<body topmargin='0' leftmargin='0' marginheight='0' marginwidth='0'>" + "");
fensterchen.document.close();
}
function anzeige4(nummer){
fensterchen = window.open("","seite","width=320,height=480,top=100,left=200",screenx="300",screeny="200",menubar="no");
fensterchen.document.open();
fensterchen.document.write("<body topmargin='0' leftmargin='0' marginheight='0' marginwidth='0'>" + "");
fensterchen.document.close();
}
//-->
</script>
<link rel="stylesheet" type="text/css" href="css/format.css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW 
innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY aLink="#000000" bgColor="#ffffff" leftMargin="0" link="#445366" text="#445366" topMargin="0" vLink="#445366" marginwidth="0" marginheigt="0">
<table border="0" cellpadding="0" cellspacing="20">
<tr>
<td width="180" height="120" bgcolor="#000000"></td>
<td width="180" height="120" bgcolor="#000000"></td>
<td width="180" height="120" bgcolor="#000000"></td>
<td width="180" height="120" bgcolor="#000000">
</td>
</tr>
<tr>
<td width="180" height="120" bgcolor="#000000">
</td>
<td width="180" height="120" bgcolor="#000000">
</td>
</tr>
</table>
</BODY></HTML>
Kann mir jemand Helfen?
Ich wäre euch wirklich dankbar.
Richi