|
| Ur på et image Fra : pspgirl | Vist : 3964 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:40 |
| | |
| 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 |
| | |
| Kommentar Fra : pspgirl |
Dato : 29-05-07 19:40 |
| | |
| Kommentar Fra : molokyle |
Dato : 29-05-07 19:57 |
| | |
| 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 |
| | |
| Kommentar Fra : molokyle |
Dato : 29-05-07 20:12 |
| | |
| Kommentar Fra : molokyle |
Dato : 29-05-07 20:18 |
| | |
| Kommentar Fra : molokyle |
Dato : 29-05-07 20:22 |
| | |
| 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 : natmaden |
Dato : 30-05-07 00:22 |
| | |
| Kommentar Fra : molokyle |
Dato : 30-05-07 01:30 |
| | |
| Kommentar Fra : molokyle |
Dato : 31-05-07 18:56 |
| | |
| 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 : 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> </p><p> </p>
<div id="billede"><img src="http://www.pspgirl.dk/tilur.gif" alt=""><span id="tid"></span></div>
<p> </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> </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>
| |
| 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.
| |
|
|