/ Forside/ Teknologi / Udvikling / Java Scripts / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Ur på et image
Fra : pspgirl
Vist : 3870 gange
150 point
Dato : 29-05-07 18:00

Håber en kan hjælpe mig ....

fandt denne side med nogle flotte ure....

http://www.pijadesigns.com/Menu/MCL.htm

tror der skal brugeset script af en eller anden art....

eller nogen der ved hvordan man laver dem????

knus Pspgirl

 
 
Kommentar
Fra : molokyle


Dato : 29-05-07 18:24

Javascriptet (..indstættes et sted i sektionen <head> ... </head>):
Kode
<SCRIPT language=javascript type=text/javascript>
<!--


/* IMPORTANT: Put script after tooltip div or
    put tooltip div just before </BODY>. */

var dom = (document.getElementById) ? true : false;
var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ns4 = (document.layers && !dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;

// resize fix for ns4
var origWidth, origHeight;
if (ns4) {
   origWidth = window.innerWidth; origHeight = window.innerHeight;
   window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

/////////////////////// CUSTOMIZE HERE ////////////////////
// settings for tooltip
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;   
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 150;
var offX= 30;   // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "2pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#FFFFFF";
var tipBgColor= "#990000";
var tipBorderColor= "#ffffff";
var tipBorderWidth= 2;
var tipBorderStyle= "ridge";
var tipPadding= 10;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing:
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip
messages[0] = ['http://www.pijadesigns.com/Clocks/Reflection/rm_pija.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[1] = ['http://www.pijadesigns.com/Clocks/Born/AAm.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[2] = ['http://www.pijadesigns.com//Clocks/Nature/s3m.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[3] = ['http://www.pijadesigns.com//Clocks/Nature/s12m.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[4] = ['http://www.pijadesigns.com//Clocks/B7m.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[5] = ['http://www.pijadesigns.com//Cal/S3m.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[6] = ['http://www.pijadesigns.com/P10m.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[7] = ['http://www.pijadesigns.com/P8m.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[8] = ['http://www.pijadesigns.com/XMB9m.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[9] = ['http://www.pijadesigns.com/pija_MC22m.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[10] = ['http://www.pijadesigns.com/xm44 4.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[11] = ['http://www.pijadesigns.com/WWm.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[12] = ['http://www.pijadesigns.com/PCbm.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[13] = ['http://www.pijadesigns.com/TCm.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[14] = ['http://www.pijadesigns.com/ccm.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[15] = ['http://www.pijadesigns.com/fblm.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];
messages[16] = ['http://www.pijadesigns.com/clock4.gif', '<div style="text-align:center; font-weight:bolder; font-style:arial"></div>'];

//////////////////// END OF CUSTOMIZATION AREA ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
   var theImgs = new Array();
   for (var i=0; i<messages.length; i++) {
   theImgs[i] = new Image();
      theImgs[i].src = messages[i][0];
}
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
// initTip   - initialization for tooltip.
//      Global variables for tooltip.
//      Set styles for all but ns4.
//      Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
   if (nodyn) return;
   tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
   tipcss = (ns4)? document.tipDiv: tooltip.style;
   if (ie4||ie5||ns5) {   // ns4 would lose all this on rewrites
      tipcss.width = tipWidth+"px";
      tipcss.fontFamily = tipFontFamily;
      tipcss.fontSize = tipFontSize;
      tipcss.color = tipFontColor;
      tipcss.backgroundColor = tipBgColor;
      tipcss.borderColor = tipBorderColor;
      tipcss.borderWidth = tipBorderWidth+"px";
      tipcss.padding = tipPadding+"px";
      tipcss.borderStyle = tipBorderStyle;
   }
   if (tooltip&&tipFollowMouse) {
      if (ns4) document.captureEvents(Event.MOUSEMOVE);
      document.onmousemove = trackMouse;
   }
}

window.onload = initTip;

/////////////////////////////////////////////////
// doTooltip function
//         Assembles content for tooltip and writes
//         it to tipDiv
/////////////////////////////////////////////////
var t1,t2;   // for setTimeouts
var tipOn = false;   // check if over tooltip link
function doTooltip(evt,num) {
   if (!tooltip) return;
   if (t1) clearTimeout(t1);   if (t2) clearTimeout(t2);
   tipOn = true;
   // set colors if included in messages array
   if (messages[num][2])   var curBgColor = messages[num][2];
   else curBgColor = tipBgColor;
   if (messages[num][3])   var curFontColor = messages[num][3];
   else curFontColor = tipFontColor;
   if (ns4) {
      var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
      tooltip.write(tip);
      tooltip.close();
   } else if (ie4||ie5||ns5) {
      var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
      tipcss.backgroundColor = curBgColor;
       tooltip.innerHTML = tip;
   }
   if (!tipFollowMouse) positionTip(evt);
   else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
   mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
   mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
   if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
// positionTip function
//      If tipFollowMouse set false, so trackMouse function
//      not being used, get position of mouseover event.
//      Calculations use mouseover event position,
//      offset amounts and tooltip width to position
//      tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
   if (!tipFollowMouse) {
      mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
      mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
   }
   // tooltip width and height
   var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
   var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
   // document area in view (subtract scrollbar width for ns)
   var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft;
   var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight+document.body.scrollTop;
   // check mouse position against tip and window dimensions
   // and position the tooltip
   if ((mouseX+offX+tpWd)>winWd)
      tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
   else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
   if ((mouseY+offY+tpHt)>winHt)
      tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
   else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
   if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
   if (!tooltip) return;
   t2=setTimeout("tipcss.visibility='hidden'",100);
   tipOn = false;
}

//-->
</SCRIPT>


..og HTML koden et sted i sktionen <body> .. </body>
<BR></a></font>
<a onmouseover="doTooltip(event,0)" onmouseout="hideTip(10)" target="_blank" href="http://www.pijadesigns.com/Clocks/Reflection/Rbck.htm">
<font size="2" color="#ffffff">Reflection</font></a><font size="2">

<BR></a></font>


..osv.

Du kan jo bare læse koden på siden ved at vælge : Vis kilde

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-05-07 18:34

Ps. Det ser altså 'SKOD' ud i Firefox

..og der er brugt dybt nestede undersider scriptet via DOM og et hav af ASCII ekvivalenter til at skjule de reelt har 'stjålet' kode og grafik andet steds:
Kode
<script language=JavaScript>m='%3Cscript%20language%3DJavaScript%3Em%3D%27%253Cscript%2520language%253DJavaScript%253Em%253D%2527%25253Cscript%252520language%25253DJavaScript%25253Em%25253D%252527%2525250A%2525253CHTML%2525253E%2525253CHEAD%2525253E%2525253CTITLE%2525253EPija%25252527s%25252520calendar%2525253C/TITLE%2525253E%2525250A%2525253CMETA%25252520http-equiv%2525253DContent-Type%25252520content%2525253D%25252522text/html%2525253B%25252520charset%2525253Diso-8859-1%25252522%2525253E%2525250A%2525253CMETA%25252520content%2525253D%25252522Microsoft%25252520FrontPage%252525205.0%25252522%25252520name%2525253DGENERATOR%2525253E%2525253C/HEAD%2525253E%2525250A%2525253CBODY%25252520oncontextmenu%2525253D%25252522return%25252520false%25252522%25252520onselectstart%2525253D%25252522return%25252520false%25252522%25252520%2525250Aondragstart%2525253D%25252522return%25252520false%25252522%25252520style%2525253D%25252522BACKGROUND-COLOR%2525253A%25252520transparent%25252522%25252520vLink%2525253D%25252523ffffff%25252520%2525250AaLink%2525253D%25252523ffffff%25252520link%2525253D%25252523ffffff%25252520leftMargin%2525253D0%25252520topMargin%2525253D0%25252520onload%2525253Dfeu%25252528%25252529%2525253B%2525253E%2525250A%2525253CSCRIPT%2525253E%25252520%2525250Afunction%25252520tt%25252528%25252529%2525257B%25252520%2525250Avar%25252520d%2525253Dnew%25252520Date%2525253B%25252520%2525250Avar%25252520h%2525253Dd.getHours%25252528%25252529%2525253B%25252520%2525250Avar%25252520m%2525253Dd.getUTCMinutes%25252528%25252529%2525253B%25252520%2525250Avar%25252520s%2525253Dd.getUTCSeconds%25252528%25252529%2525253B%25252520%2525250Aheure%2525253D%25252522%25252522%2525253B%25252520%2525250Aif%25252528h%2525253C10%25252529%2525257Bheure+%2525253D%252525220%25252522%2525257D%2525253B%25252520%2525250Aheure+%2525253Dh+%25252522%2525253A%25252522%2525253B%25252520%2525250Aif%25252528m%2525253C10%25252529%2525257Bheure+%2525253D%252525220%25252522%2525257D%2525253B%25252520%2525250Aheure+%2525253Dm+%25252522%2525253A%25252522%2525253B%25252520%2525250Aif%25252528s%2525253C10%25252529%2525257Bheure+%2525253D%252525220%25252522%2525257D%2525253B%25252520%2525250Aheure+%2525253Ds%2525253B%25252520%2525250Adocument.getElementById%25252528%25252527cadran%25252527%25252529.innerHTML%2525253Dheure%2525253B%25252520%2525250A%2525257D%25252520%2525250Afunction%25252520feu%25252528%25252529%2525257B%25252520%2525250Att%25252528%25252529%2525253B%25252520%2525250AsetInterval%25252528%25252522tt%25252528%25252529%25252522%2525252C1000%25252529%2525253B%25252520%2525250A%2525257D%25252520%2525250A%2525253C/SCRIPT%2525253E%2525250A%2525250A%2525253CSTYLE%2525253E%25252523cadran%25252520%2525257B%2525250A%25252509PADDING-RIGHT%2525253A%2525252012px%2525253B%25252520PADDING-LEFT%2525253A%2525252012px%2525253B%25252520FONT-WEIGHT%2525253A%25252520bold%2525253B%25252520FONT-SIZE%2525253A%2525252010pt%2525253B%25252520PADDING-BOTTOM%2525253A%2525252012px%2525253B%25252520COLOR%2525253A%25252520000000%2525253B%25252520PADDING-TOP%2525253A%2525252012px%2525253B%25252520FONT-FAMILY%2525253A%25252520Verdana%2525253B%25252520POSITION%2525253A%25252520relative%2525250A%2525257D%2525250A%2525253C/STYLE%2525253E%2525250A%2525250A%2525253CP%2525253E%2525253CA%25252520href%2525253D%25252522http%2525253A//www.pijadesigns.com%25252522%25252520target%2525253D_bank%2525253E%2525250A%2525253CIMG%25252520%2525250Asrc%2525253D%25252522B.gif%25252522%25252520border%2525253D0%25252520style%2525253D%25252522border-style%2525253Asolid%2525253B%25252520border-width%2525253A0px%2525253B%25252520%25252522%25252520width%2525253D%25252522247%25252522%25252520height%2525253D%25252522198%25252522%2525253E%2525253C/A%2525253E%2525253C/P%2525253E%2525253CSPAN%25252520id%2525253Dcadran%25252520%2525250Astyle%2525253D%25252522LEFT%2525253A%25252520-4px%2525253B%25252520TOP%2525253A%25252520-37px%25252522%2525253Einitialisation%2525253C/SPAN%2525253E%2525253Cb%2525253E%25252520%2525253C/b%2525253E%25252520%2525253C/BODY%2525253E%2525253C/HTML%2525253E%252527%25253Bd%25253Dunescape%252528m%252529%25253Bdocument.write%252528d%252529%25253B%25253C/script%25253E%2527%253Bd%253Dunescape%2528m%2529%253Bdocument.write%2528d%2529%253B%253C/script%253E%27%3Bd%3Dunescape%28m%29%3Bdocument.write%28d%29%3B%3C/script%3E';d=unescape(m);document.write(d);</script>


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-05-07 18:40

Ps. Det er i sidste del af ASCII ækvivalent koden du finder scriptet til uret.

Læs mere om at skjule såvel URL som koden med ASCII her:

1.) http://www.pc-help.org/obscure.htm

2.) http://www.html.dk/artikler/00041/

..præcis samme 'teknik'

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-05-07 18:44

..og i Opera browseren virker 'skidtet' slet IKKE !!!

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-05-07 18:46

Glade amatører

</MOLO>

Kommentar
Fra : pspgirl


Dato : 29-05-07 18:54

ja jeg er også en amatør

så er det jo godt jeg kan spørge her......

jeg blev ikk meget klogere
jeg ville gerne lave mit eget billede og sættet uret på til min HP

har forsøgt at snuppe koden men det virker desværre ikk med mit eget billede....

var i vis kilde for tit står der jo linket til siden hvor scriptet er fra..... det kan jeg bare ikk finde

knus Pspgirl






Kommentar
Fra : molokyle


Dato : 29-05-07 19:27

Nu sk' du bare høre

Det er såmen ik' så svært

Jeg har lige brugt et par minutter til at boxe dette sammen til dig

Ur på grafik: http://www.cssboxing.com/temp/grafik_ur.html

Spørgsmål?

</MOLOKYLE>



Kommentar
Fra : pspgirl


Dato : 29-05-07 19:40

wow du var hurtig.....

har lige prøvet at sætte et billede ind....

http://www.pspgirl.dk/urbillede.html

det skal der leges mere med

tak skal du ha ....

knus Pspgirl

Kommentar
Fra : molokyle


Dato : 29-05-07 19:57

Med en smule knofedt validerer det også korrekt i XHTML 1.0

Prøv igen : http://www.cssboxing.com/temp/grafik_ur.html

..jeg boxede lidt videre med 'lortet'

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-05-07 20:01

..og var der andre ting?

Anden skrifttype?

Tekststørrelse?

Farve?

..eller noget?

</MOLOKYLE>

Kommentar
Fra : pspgirl


Dato : 29-05-07 20:03

wow du er da god.........


ja ville være godt hvis jeg selv kunne bestemme skrift type farve og str....

og så hvordan lægger jeg det center på siden ???

kan se du har *** position:absolute;top:16px;left:16px***

skal jeg selv sidde og regne px ud efter hvor jeg vil ha det på min side???

knus Pspgirl

Kommentar
Fra : molokyle


Dato : 29-05-07 20:11

Næeh.. du skal såmen bruge relativ positionering: http://www.w3schools.com/css/css_positioning.asp

Dvs. 'Flytte' script elementet (<span id="tick2"></span>) i forhold til det 'overordnede' element.

..eller 'omvendt'

Dermed kan du placere både dit billede (baggrund) og 'uret' hvor på siden du lyster i forhold til program flowet = (X-)HTML DOM hierakiet: http://www.w3schools.com/htmldom/dom_reference.asp

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-05-07 20:12
Kommentar
Fra : molokyle


Dato : 29-05-07 20:18

Centrering af et DOM element i Javascript:

http://www.webdesign101.dk/web102/dhtml/dhtmlapi/centrering.php

..og lidt centrering med CSS:

http://theodorakis.net/blockcenter.html

</MOLOKYLE>



Kommentar
Fra : molokyle


Dato : 29-05-07 20:22

Hvad som gælder for Websider = <html> .. </html> blok markøren..?

Gælder faktisk også alle andre DOM elementer/markører/tags ved brug af boxmodellen:

http://www.webdesign101.dk/csslayout/autocentrering.php

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-05-07 20:29

Hvis jeg 'pladre' lidt rigeligt?

..så er det fordi jeg selv har haft en succes-oplevelse hér på www.kandu.dk idag mht. PHP på min hjemmeside

..som selvsagt er: Under konstruktion

</CSSBOXING>

Kommentar
Fra : pspgirl


Dato : 29-05-07 21:03

Der er jo læsestof til hele natten

så jeg vil gå igang og se om jeg kan finde ud af det forskellige
ellers må jeg råbe på dig igen ......
tak for hjælpen så langt......

jeg har også fået hjælp her flere gange.
man bliver ski så glad når man så får tingene til at virke.
Jeg er ikk nogen ørn til html og HP men er nysgerrig og roderpå nettet
rundt for at finde sjove ting at prøve

knus Pspgirl

Kommentar
Fra : molokyle


Dato : 29-05-07 21:14

Happy coding...

Du spø'r bar', hvis der sgu vær' no'et?

</MOLOKYLE>

Kommentar
Fra : natmaden


Dato : 30-05-07 00:22

hvad med dette ..

http://sannie.dk/


Kommentar
Fra : molokyle


Dato : 30-05-07 01:30

Et par kvæk fra Homer ka' jeg høre natmaden ..und nicht weider

..men det er måske fordi, at jeg hart 'skoddet' alle "Major Players" som: MP, RP og QT ?

Puritanere benytter: http://www.cccp-project.net/

Derudover er et 'normalt' ur, med et 'normalt' barn, ..set bedre i JAVA

http://www.anfyteam.com/anj/index.html

</MOLO>

Kommentar
Fra : molokyle


Dato : 30-05-07 11:39

natmaden -> Jeg var faktisk slet ikke klar over, at man både kunne lægge lyd og billede på BillsClock2 ..som jeg selv har billsClock.class, clockHands.class, hmHand.class og sweep.Hand.class filerne til at ligge og rode et sted, men det er nok en tudsegammel version. Den 'nye' bruger en JAVA archive fil (billsclock2.jar) i stedet kan jeg se

http://javaboutique.internet.com/billsClock/

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 31-05-07 18:56

pspgirl -> Så er der 'hul' igennem igen ...ellers tjek din gæstebog:

http://www.a-free-guestbook.com/guestbook.php?username=pspgirl

</MOLOKYLE>



Kommentar
Fra : pspgirl


Dato : 31-05-07 19:00

heheh har tjekket ..... også min mail LOL

er ved at læse mig igennen alle de forskellige ting LOL

håber ski da jeg bliver klogere af det LOL

knus Pspgirl

Kommentar
Fra : molokyle


Dato : 31-05-07 19:01

Jeg fandt jo ud af at inkompabiliteten med Firefox browseren skyldes som jeg skrev:
Citat
Jeg har nu kikket lidt på det script jeg gav dig og har arbejdet en smule videre på ´sagen´. Jeg er kommet frem til at FIREFOX browseren tilsyneladende har problemer med funktionen: setInteval(..) ..som illustreret her:

http://pages.mckoss.com/setIntervalTest.htm

Derfor har jeg ´udmasket´ denne browsers Javascriptkode, således at kun (baggrunds-)billedet bliver vist i denne browser, men ikke uret. Til gengæld både validerer og virker javascriptkoden korrekt i både (X-)HTML og CSS og vises dermed i både IE og Opera browserne ;-)

Imidlertid har jeg gjort det en smule lettere for dig at rette et evt. stylesheet til.

(Se kildekoden på: http://www.cssboxing.com/temp/grafik_ur.html )

Nu kan du uden de store ´faldbalader´ selv rette CSS egenskaberne til ;-)

Jeg leder i øjeblikket efter en Mozilla specifik løsning i Javascript, således at det ´måske´ også kommer til at fungere dér!


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 31-05-07 19:06

Kode
#ticks{
background:transparent;
/* Til PSPGIRL: Dette er DIN farve, så indsæt hér... color:rgb(251,151,210); */
position:absolute;
top:16px;
left:16px;
font-family:verdana,sans-serif;
}


..betyder altså ..hvis du vil bruge dén farve:
Kode
#ticks{
background:transparent;
color:rgb(251,151,210);
position:absolute;
top:16px;
left:16px;
font-family:verdana,sans-serif;
}

<MOLOKYLE>

Kommentar
Fra : pspgirl


Dato : 31-05-07 19:15

kan jeg ikke bruge


Kode
#ticks{
background:transparent;
color:color='#fb97d2'
position:absolute;
top:16px;
left:16px;
font-family:verdana,sans-serif;
}

som jeg har nu eller skal det være for at det kan ses i de diverse browsere???

color:rgb(251,151,210);

knus Pspgirl

Kommentar
Fra : molokyle


Dato : 01-06-07 02:36

Næeh... ingen af de 2 nævnte farver er crossbrowserkompatible

Det er kun disse: http://www.html.dk/dokumentation/farver/

..så hvis du vil være HELT sikker, så vælger du en blandt de 2 øverste linjer

</MOLOKYLE>





Kommentar
Fra : molokyle


Dato : 01-06-07 02:38

Ps. Som sagt er jeg ikke den store grafiker, men #ff33ff er for mig at se, den som kommer 'nærmest'.

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 01-06-07 03:16

kan jeg ikke bruge #fb97d2; ?

Joda der er ingen forskel på på color:#fb97d2; og color:rgb(251,151,210); ..andet end syntaxen

Rent semantisk er de to instruktioner identiske ..og farven dermed også

</MOLOKYLE>




Kommentar
Fra : molokyle


Dato : 02-06-07 08:39

HEUREKA !!!

Så lykkedes det at få uret på billedet til at virke i Firefox også

Se resultatet hér: http://www.cssboxing.com/temp/dc.html

Det krævede dog en hel del 'krumspring', som jeg ikke liiiiige havde regnet med sku' til.

For det første, af en eller anden besynderlig grund virker det kun i Firefox, hvis man benytter HTML4.01 Transitional ..UDEN loose.dtd i !DOCTYPE'en. Så det er godt nok heldigt, at det lige præcis er hvad du har kodet dine sider i
Skal jeg være helt ærlig? Så aner jeg ikke hvorfor det er sådan. Jeg 'opdagede' det ved et tilfælde da jeg 'simulerede' din side.

For det andet: Grundet bug'en i setInterval(..) har jeg nu i stedet benyttet setTimeout(..) funktionen, hvilket faktisk har gjort koden mere kompakt.

BEMÆRK ændringerne hvis du vil bruge dette ur:

Nu går det på 'dansk' i stedet for på 'engelsk' ..altså et 24 timers ur, i stedet for med AM og PM angivelser. Jeg kan altid rette dette 'tilbage' hvis du synes?

Den relevante kode for dig kommer her:

Indsæt i <head> .. </head> sektionen:
Kode
<style type="text/css">
#tid
{
position:relative;
top:-32px;
left:-128px;
font-family:arial,sans-serif;
font-size:100%;
color:#fb97d2;
background-color:transparent;
}
</style>

<script language="JavaScript" type="text/javascript">
<!--
function ur()
{
var nu=new Date()
var timer=nu.getHours()
var minutter=nu.getMinutes()
var sekunder=nu.getSeconds()
if (timer==0) { timer=00 }
if (timer<10) { timer="0"+timer }
if (minutter<10) { minutter="0"+minutter }
if (sekunder<10) { sekunder="0"+sekunder }
tid.innerHTML=timer+":"+minutter+":"+sekunder+""
setTimeout("ur()",1000)
}
//-->
</script>


Som du kan se har jeg nu benyttet relativ positionering. Dermed kan du 'flytte' uret i forhold til det foregående HTML element. I dette tilfælde billedet. Skal du flytte til venstre benytter du negative værdier. Til højre bruger du positive. Skal det flyttes opad bruger du ligeledes negative værdier og positive for at flytte det nedad. Med negative værdier menes, at du sætter et - (minus) tegn foran pixel (px) værdierne.

Fonten vælger du med font-family egenskaben.

Størrelsen på fonten har jeg sat til 100%. Større værdier giver en større font og mindre værdier en mindre font.

..og så har jeg sat din farve (color) til den du ønskede: #fb97d2;

Nu kommer vi så til <body..> .. </body> sektionen:
Kode
<body onload="ur()">
<div>
<img src="henrik.jpg" alt="">
<span id="tid"></span>
</div>


Der er ikke så meget at bemærke til dén, men jeg kan se du har en fejl i din kode, da du har ikke mindre end 2 <body> markører på din nuværende side. Dette er IKKE tilladt!

Din kode for hele siden burde nu se således ud:
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Pspgirl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background:#000;
color:#fb97d2;
margin:0;
padding:0;
text-align:center;
}
#tid {
position:relative;
top:-16px;
left:-116px;
font-family:sans-serif;
font-size:100%;
color:#fb97d2;
background-color:transparent;
}
img {border:0;}
#billede{
position:relative;
left:3.5%;
}
</style>
<script type="text/javascript" language="javascript">
<!--
function ur() {
var nu=new Date()
var timer=nu.getHours()
var minutter=nu.getMinutes()
var sekunder=nu.getSeconds()
if (timer==0) { timer=00 }
if (timer<10) { timer="0"+timer }
if (minutter<10) { minutter="0"+minutter }
if (sekunder<10) { sekunder="0"+sekunder }
tid.innerHTML=timer+":"+minutter+":"+sekunder+""
setTimeout("ur()",1000)
}
function SymError() {return true;}
window.onerror = SymError;
//-->
</script>
</head>
<body onload="ur()">
<br>
<p>&nbsp;</p><p>&nbsp;</p>
<div id="billede"><img src="http://www.pspgirl.dk/tilur.gif" alt=""><span id="tid"></span></div>
<p>&nbsp;</p>
<a href="http://www.pspgirl.dk/menu.html"><img src="http://www.pspgirl.dk/NytTilHP/enter.gif" width="236" height="106" alt=""></a>
</body>
</html>


Du kan se den hér: http://www.cssboxing.com/temp/pspgirlur.html

Den validerer korrekt til HTML 4.01 Transitional og til CSS level 2

Din side derimod: http://www.pspgirl.dk/ ?

..har intet stylesheet
..men ...hvisker giver: Result: Failed validation, 5 errors

(X-)HTML tjekker du hér: http://validator.w3.org/

..og CSS hér: http://jigsaw.w3.org/css-validator/

Jeg tror nu ikke jeg gider 'lege' mere med din side. Nu må du selv lave de sidste par rettelser, hvis ikke du er tilfreds.

Har du flere spørgsmål? Skal du imidlertid være mere end velkommen.

</MOLOKYLE>

Accepteret svar
Fra : molokyle

Modtaget 150 point
Dato : 02-06-07 08:49

Lige et ps.

Du kan naturligvis sagtens fjerne http://www.pspgirl.dk henvisningerne, når du uploader til eget domæne.

Jeg har kun medtaget dem for at grafikken skulle kunne vises på mit domæne. Det er dét der kaldes 'deep-linking' og er ikke særligt populært, da jeg jo snylter på på din udbyders server.

Selv kan du bare bruge rodrelative henvisninger:
Kode
<div id="billede"><img src="/tilur.gif" alt=""><span id="tid"></span></div>
<p>&nbsp;</p>
<a href="/menu.html"><img src="/NytTilHP/enter.gif" width="236" height="106" alt=""></a>


Jeg skal nok fjerne koden på min side, når du synes at tingene er på plads

</MOLOKYLE>

Kommentar
Fra : pspgirl


Dato : 02-06-07 14:40

1000 tak for din hjælp

uden dig havde jeg aldrig fundet ud af det.

har gemt alle oplysninger og link
er jo nyttigt for en amatør som mig

har laget den nye kode ind så nu skulle der ikke være fejl håber jeg

knus og tak for hjælpen igen

knus Pspgirl

Godkendelse af svar
Fra : pspgirl


Dato : 02-06-07 14:41

Tak for svaret molokyle.

hvordan skulle jeg nogen side ha fundet ud af det selv

knus Pspgirl

Kommentar
Fra : molokyle


Dato : 02-06-07 15:01

Velbekommelse Pspgirl

Selvfølgelig kunne du have '...fundet ud af det selv', men er det ik' dét ..det handler om, men:
Citat
Vejen til en hurtig løsning, gennem bruger til bruger hjælp, danske nyhedsgrupper og vidensdeling.


Jeg skodder/sletter lige eksemplet på min side, da jeg helst ser; at der kun befinder sig XHTML på mine sider og jeg bestemt IKKE har behov for at 'snylte' på din server

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 02-06-07 15:03

Sådan....

Selvfølgelig har jeg en BACK-UP ...sku' dét bli' nødvendigt !

Happy coding... </MOLOKYLE>

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177414
Tips : 31962
Nyheder : 719565
Indlæg : 6407846
Brugere : 218876

Månedens bedste
Årets bedste
Sidste års bedste