bilder in buttons umwandelbar?

laco1 · 15. März 2009, 17:53

hallo,

ich habe hier ein script gefunden, in dem man bilder über den bildschirm fliegen lassen kann. nun ist das script so geschrieben, dass die bilder nicht anklickbar sind. könnte man das ändern und jedes bild als einen button umfunktionieren?

so siehts aus:
java24.net/scripts/grafik/butterfly_I_demo.html

.js-datei code:

Quellcode

var Ymax=8; // MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; // MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; // MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES
var swapspeed=30; // SPEED IN WHICH IMAGES CHANGE
// THE ARRAY BELOW CONTAINS A SUBARRAY FOR EACH FLOATING IMAGE.
// EACH SUBARRAY CONTAINS THE DIFFERENT SEPERATE IMAGES USED FOR THE ANIMATION.
var floatimages=[
['1.png', '1.png', '1.png', '2.png', '2.png', '2.png', '3.png', '3.png', '3.png' ],
['11.png', '11.png', '11.png', '22.png', '22.png', '22.png', '33.png', '33.png', '33.png' ],
['1.png', '1.png', '1.png', '2.png', '2.png', '2.png', '3.png', '3.png', '3.png' ],
['11.png', '11.png', '11.png', '22.png', '22.png', '22.png', '33.png', '33.png', '33.png' ],
['1.png', '1.png', '1.png', '2.png', '2.png', '2.png', '3.png', '3.png', '3.png' ]
];
//*********DO NOT EDIT BELOW***********
var w3c =(document.getElementById)? true:false;
var ns4 = (document.layers)? true:false;
var ie4 = (document.all && !w3c)? true:false;
var ie5 = (document.all && w3c)? true:false;
var ns6 = (w3c && navigator.appName.indexOf("Netscape")>=0 )? true:false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(ns4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px">';
t+='<img src="'+floatimages[i][0]+'" name="p'+i+'" border="0">';
t+=(ns4)? '</layer>':'</div>';
}
document.write(t);
function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)?IDs[num].Xstep:-IDs[num].Xstep , (IDs[num].Ydir)?IDs[num].Ystep:-IDs[num].Ystep);
}
function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*1)>0;
IDs[num].Xdir=Math.floor(Math.random()*1)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax);
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}
function getscrollx(){
if(ie4||ie5)return document.body.scrollLeft;
else return window.pageXOffset;
}
function getscrolly(){
if(ie4||ie5)return document.body.scrollTop;
else return window.pageYOffset;
}
function getid(name){
if(ns4)return document.layers[name];
else if(ie4)return document.all[name];
else return document.getElementById(name);
}
function moveidto(num,x,y){
if(ns4)IDs[num].moveTo(x,y);
else{
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}
function getidleft(num){
if(ns4)return IDs[num].left;
else return parseInt(IDs[num].style.left);
}
function getidtop(num){
if(ns4)return IDs[num].top;
else return parseInt(IDs[num].style.top);
}
function moveidby(num,dx,dy){
if(ns4)IDs[num].moveBy(dx, dy);
else{
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}
function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth;
else return window.innerWidth;
}
function getwindowheight(){
if(ie4||ie5)return document.body.clientHeight;
else return window.innerHeight;
}
function swapimg(num){
IDs[num].ctr=(IDs[num].ctr<floatimages[num].length-1)?IDs[num].ctr+1:0;
if(ns4)IDs[num].document.images["p"+num].src=floatimages[num][IDs[num].ctr];
else document.images["p"+num].src=floatimages[num][IDs[num].ctr];
setTimeout('swapimg('+num+')', swapspeed);
}
window.onload=function(){
wind_w=getwindowwidth()-30;
wind_h=getwindowheight()-30;
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(ns4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}else{
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
IDs[i].ctr=0;
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
swapimg(i);
if(ns4)IDs[i].visibility = "show";
else IDs[i].style.visibility = "visible";
setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}
window.onresize=function(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
}

Alles anzeigen

html code:

HTML-Quellcode

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta name="Author" content="Brian Gosselin">
<title>Javascripts - Javaapplets - DHTML [java24.net] Butterfly I - Demo </title>
<style type="text/css">
body{
background-image:url('clouds1.jpg');
background-color:lightblue;
font-size:10pt;
color:black;
font-family:sans-serif;
}
</style>
</head>
<body>
<center>
<script language="javascript" src="butterfly2.js"></script>
</center>
</body>
</html>

Alles anzeigen

BennyBunny · 15. März 2009, 17:56

Falsches Forum. Javascript hat rein gar nichts mir Java zu tun.

Das mit den Buttons wird sicherlich gehen.

Torben Brodt · 15. März 2009, 18:02

Hi,
erstmal musst du natürlich dafür sorgen dass Buttons erzeugt werden.
dazu musst du aber auch eine eigene Liste mit Referenzen führen. Denn document.images zu referenzieren ist keine sehr gute Lösung. (wie man hier sieht)
Ansonsten versuch dein Glück mal allein. Bei Fragen helfen wir natürlich.

laco1 · 15. März 2009, 18:24

oh, hatte ich aus versehen ins falsche forum gepostet...

naja, ich kann eigentlich gar kein javascript.
wie kann man dafür sorgen, dass die buttons erzeugt werden - ich schätze in die html datei muss das bild/die bilder vorhanden sein(?).

und wie würde das mit der liste funktionieren?

Torben Brodt · 17. März 2009, 09:10

naja, ohne Programmierkenntnisse wirst du wohl weiter nach einer Fertiglösung suchen.
Es sind noch mehrere Anpassungen nötig.... die einfachste davon ist in #27
da musst du

Quellcode

t+='<img src="'+floatimages[i][0]+'" name="p'+i+'" border="0">';

durch Buttons entfernen...

ich denke aber weiter werde ich dir hier nicht helfen. Das Forum ist für Programmierer.. nicht für "Endkunden"-Lösungen.

Ansonsten schonmal drüber nachgedacht die Bilder durch einen Link drumherum klickbar zu machen?

laco1 · 17. März 2009, 12:28

ähm, wie jetzt endkunden-lösung? hallo?
wo bitte steht, dass ich euch bitte mir alles zu programmieren??? lies dir bitte mal meine texte durch, ich denke da wirst du keinen hinweis darauf finden!!
ich hatte lediglich geschrieben, dass ich kein java-script beherrsche - und jetzt? ich beherrsche dafür html, css, flash...

ich wollte lediglich ein paar tipps, wie ich das problem lösen könnte und der hinweis, das ich kein js beherrsche diente dazu, mir keine kryptisch verschlüsselten antworten zu geben - also "bitte sprechen sie langsam und benutzen sie einfache worte", wenn ich das mal übersetzen darf...

deine antwort war mir etwas zu kryptisch - mit " durch buttons entfernen..." kann ich nichts anfangen. versuch mir doch mal alles so zu erklären, so das ich selbstständig nachforschungen anstellen kann. dazu brauchst du wahrscheinlich noch nicht mal einen code-schnipsel...

Gnex · 17. März 2009, 15:46

Theoretisch ginge auch eine Lösung mit "onClick" oder einem ganz normalen Link, sofern nur die Bilder nur anklickbar sein sollen.

Snowflake · 17. März 2009, 17:49

Ich sehe iwie gerade gar kein Grund, dass du so leicht ausfallend wirst. Du möchtest hilfe. Dann musst du auch etwas dafür tun.
Wenn du HTML kannst, dann müsste dir d0nuts Tipp den er dir gegeben hat schon reichen.

Er hat dir die Zeile gezeigt in der die Bilder ausgegeben werden. Mach ein normalen Link und deine Bilder sind klickbar.

Wo ist denn jetzt dein Problem?

Gnex · 17. März 2009, 20:51

Snowflake schrieb:

Ich sehe iwie gerade gar kein Grund, dass du so leicht ausfallend wirst. Du möchtest hilfe. Dann musst du auch etwas dafür tun.
Wenn du HTML kannst, dann müsste dir d0nuts Tipp den er dir gegeben hat schon reichen.

Er hat dir die Zeile gezeigt in der die Bilder ausgegeben werden. Mach ein normalen Link und deine Bilder sind klickbar.

Wo ist denn jetzt dein Problem?

Du meinst aber nicht mich, oder? oO

laco1 · 18. März 2009, 09:37

ich bin nicht ausfallend geworden, fand nur über den vorwurf unpassend... - das ich was tun will/muss hab ich ja jetzt lang und breit erklärt ... -

ich habe versucht einen onclick einzubauen, bin mir aber nicht sicher, das es funktionieren kann, da am anfang alle bilder als floatimages aufgeführt sind und später komplett angesteuert werden.

Quellcode

var floatimages=[
['logo.png' ],
['1111.png', '2222.png' ],
['1111.png', '2222.png' ],
['1111.png', '2222.png' ],
['1111.png', '2222.png' ],
];

es muss also eine spezielle zuweisung von einzelnen bildern geben (bild1, bild2, bild3) und später durch onclick angesteuert werden (onclick="Bild1", onclick="Bild2"...). dann würde meiner meinung nach (wie gesagt ich kenn mich nicht wirklich aus) auch hier eine änderung im code vorgenommen werden müssen, da sich alles auf diese floatimages- aufzählung bezieht:

Quellcode

function swapimg(num){
IDs[num].ctr=(IDs[num].ctr<floatimages[num].length-1)?IDs[num].ctr+1:0;
if(ns4)IDs[num].document.images["p"+num].src=floatimages[num][IDs[num].ctr];
else document.images["p"+num].src=floatimages[num][IDs[num].ctr];
setTimeout('swapimg('+num+')', swapspeed);
}
window.onload=function(){
wind_w=getwindowwidth()-30;
wind_h=getwindowheight()-30;
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(ns4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}else{
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}

Alles anzeigen

oder ist der bezug [num] ein bezug auf eines der bilder?

Quellcode

onclick="location='index.html'">

kann das sein? - ich versuche es nur nachzuvollziehen, um eine lösung für mich zu finden...

laco1 · 18. März 2009, 14:08

so, ich habe etwas probiert, leider bleiben jetzt die bilder stehen, die links bewegen sich aber merkwürdigerweise. anscheinend fehlt die verknüpfung zwischen bild und sich bewegenden link(?)

Quellcode

floatimages[0]='butterfly2.gif';
floatimages[1]='2222.png';
floatimages[2]='butterfly2.gif';
floatimages[3]='butterfly2.gif';
floatimages[4]='butterfly2.gif';

Quellcode

<div id="pic0" style="position: absolute; visibility: visible; left: 1131px; top: 539px;"><a href="javascript:hidebutterfly()"><img src="butterfly2.gif" name="p0" border="0"></a></div>
<div id="pic1" style="position: absolute; visibility: visible; width: 10px; height: 10px; left: 13px; top: 333px;"><a href="javascript:hidebutterfly()"><img src="butterfly2.gif" name="p1" border="0"></a></div>
<div id="pic2" style="position: absolute; visibility: visible; width: 10px; height: 10px; left: 1178px; top: 10px;"><a href="javascript:hidebutterfly()"><img src="butterfly2.gif" name="p2" border="0"></a></div>
<div id="pic3" style="position: absolute; visibility: visible; width: 10px; height: 10px; left: 509px; top: 563px;"><a href="javascript:hidebutterfly()"><img src="butterfly2.gif" name="p3" border="0"></a></div>
<div id="pic4" style="position: absolute; visibility: visible; width: 10px; height: 10px; left: 364px; top: 97px;"><a href="javascript:hidebutterfly()"><img src="butterfly2.gif" name="p4" border="0"></a></div>

bilder in buttons umwandelbar?

bilder in buttons umwandelbar?

Quellcode

HTML-Quellcode

Quellcode

Snowflake schrieb:

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Benutzer online 1