|
|
|
det ville være dejligt ps. er selv på skolen 
| |
 | Kommentar
Fra :  molokyle  |
Dato : 31-01-06 10:11 |
|
Jeg retter blot dette script til, så det kommet til at matche dine behov. Rutinen virker i ALLE browsere.
Kode
<html>
<head>
<title>Flydende popup vindue</title>
<script type="text/javascript">
<!--
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;
function ddInit(e){
topDog=isIE ? "BODY" : "HTML";
whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar"){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}
function dd(e){
if (!ddEnabled) return;
whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}
function ddN4(whatDog){
if (!isN4) return;
N4=eval(whatDog);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e){
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e){
if (isHot){
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function(){
N4.releaseEvents(Event.MOUSEMOVE);
}
}
function hideMe(){
if (isIE||isNN) whichDog.style.visibility="hidden";
else if (isN4) document.theLayer.visibility="hide";
}
function showMe(){
if (isIE||isNN) whichDog.style.visibility="visible";
else if (isN4) document.theLayer.visibility="show";
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
//-->
</script>
<style type="text/css">
<!--
body {
background:#fff;
color:#000;
font-family:arial,tahoma,verdana,sans-serif;
font-size:0.75em;
font-style: normal;
border:0px;
padding:8px;
margin:0px;
}
a:link{color:#ffff;}
a:active{color:#ffff00;}
a:visited{color:#ff0000;}
//-->
</style>
</head>
<body>
<!-- BEGIN FLOATING LAYER CODE //-->
<div id="theLayer" style="position:absolute;width:250px;left:100;top:100;visibility:visible;">
<table border="0" width="250" bgcolor="#000000" cellspacing="0" cellpadding="1">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="4" height="36">
<tr>
<td id="titleBar" style="cursor:move" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
<font face="Arial" color="#ffffff">Overskrift</font>
</layer>
</ilayer>
</td>
<td>
<a href="#" onClick="hideMe();return false" style="text-decoration:none;a:visited:#ffffff;font-family:arial san serif;font-weight:bold;color:#000000;background:#ffffff;padding:0px 2px 0px 2px;margin-right:4px;">X</a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#ffffff" style="padding:4px" colspan="2">
<!-- PLACE YOUR CONTENT HERE //-->
Indholdet af pop-up'en står her.
<br/>
Dette er en test !!!
<!-- END OF CONTENT AREA //-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END FLOATING LAYER CODE //-->
<p>
<a href="javascript:showMe();">Åbn</a>
</p>
<p>
<a href="javascript:hideMe();">Luk</a>
</p>
</body>
</html> |
</MOLOKYLE>
| |
 | Kommentar
Fra : sofus.dk  |
Dato : 31-01-06 10:22 |
| | |
| Kommentar
Fra : sofus.dk |
Dato : 31-01-06 10:27 |
| | |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 10:29 |
|
Jeg kan også lave en løsning i ren CSS ved at skrive lidt om på funktionen af denne menu:
Kode
<html>
<head>
<title>Menu med infobox</title>
<style type="text/css">
body {
background-color: #fcf000;
}
#menu {
width:100px;
text-align:center;
position:relative;
}
.box {
position:relative;
}
#menu a, #menu a:visited {
text-decoration:none;
background-color:#fcf000;
color:#c00;
display:block;
width:88px;
height:16px;
border:1px solid #fff;
padding:5px;
}
* html #menu a, * html #menu a:visited {
width:100px;
height:28px;
w\idth:88px;
he\ight:16px;
}
#menu a span {
display:none;
}
#menu a:hover {
border:1px solid #000;
}
#menu a:hover span.left,
#menu a:hover span.right {
display:block;
position:absolute;
height:0;
width:0;
overflow:hidden;
border-top:8px solid #fff;
border-bottom:8px solid #fff;
}
#menu a:hover span.left {
left:5px;
top:5px;
border-left:8px solid #c00;
}
#menu a:hover span.right {
left:87px;
top:5px;
border-right:8px solid #c00;
}
* html #menu a:hover span.left,
* html #menu a:hover span.right {
width:8px;
height:16px;
w\idth:0;
he\ight:0;
}
#menu a:hover span.lk {
display:block;
position:absolute;
left:120px;
top:0;
padding:5px;
width:100px;
background-color:#fff;
color:#000;
border:1px solid #234;
}
</style>
</head>
<body>
<div id="menu">
<div class="box">
<a href="#nogo">Item 1
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 1
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 2
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 2
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 3
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 3
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 4
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 4
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 5
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 5
</span>
</a>
</div>
</div>
</body>
</html> |
Dette virker nemlig også i alle browsere og man slipper for pop-up advarsler.
..men som sagt. Jeg skal lige have tid at 'lege' med det.
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 10:50 |
|
Hvor ER jeg dum 
Du udnytter da blot ALT parameteren i <img.../> markøren.
Når musen føres over billedet kommer teksten frem og når du flytter musen væk, forsvinder den igen. Det er selvfølgelig denne helt simple løsning du skal bruge 
Kode
<html>
<head>
<title>ALT tekst på billeder</title>
</head>
<body>
<img src="henrik.jpg" alt=" Dette er en almidelig tekst.
Indskrevet direkte i billedets alt='...' parameter.
Teksten formateres direkte i HTML koden.
Linieskift og hele balladen.
;-)
..som du ser.
" />
</body>
</html> |
Du indsætter blot din egen billedfil og skriver den tekst ind du ønsker. (NB: Husk dog du ikke må bruge dobbelte anførselstegn i teksten!)
</MOLOKYLE>
| |
|
fint fint det prøver jeg da så ;)
| |
|
hmm den sidste du sendte kunne jeg ikke helt få til at virke.. men kan da sende dig kodningen jeg har til siden hvor det gerne bør komme frem.
Kode
<HTML>
<HEAD><TITLE>Projekt prøve1</TITLE>
<SCRIPT src="oodomimagerollover.js" type=text/javascript>
<STYLE type=text/css>BODY {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: tahoma, verdana
}
TD {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: tahoma, verdana
}
P {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: tahoma, verdana
}
P {
MARGIN: 1em 0px
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; MARGIN: 1em 0px 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: disc
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-POSITION: inside; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
PRE {
FONT-SIZE: 8pt; MARGIN: 0px; COLOR: #000000; FONT-FAMILY: tahoma, verdana
}
A {
COLOR: #ff6600; TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline
}
H1 {
FONT-SIZE: 12pt; MARGIN: 0px; COLOR: #ff6600; FONT-FAMILY: tahoma, verdana
}
H2 {
FONT-SIZE: 9pt; MARGIN: 0px; COLOR: #000000; FONT-FAMILY: arial, sans-serif
}
H3 {
FONT-SIZE: 9pt; MARGIN: 0px; COLOR: #ffffff; FONT-FAMILY: arial, sans-serif
}
H4 {
FONT-WEIGHT: normal; FONT-SIZE: 18pt; MARGIN: 0px; COLOR: #3f83b7; FONT-FAMILY: impact, sans-serif; LETTER-SPACING: -1px
}
</STYLE>
</SCRIPT>
</HEAD>
<BODY style="BACKGROUND: url(/templates/b3009/images/site-background.gif) #f0f0f0;MARGIN: 0px">
<DIV id=maindiv1 align=center><DIV id=maindiv2 style="WIDTH: 826px; POSITION: relative">
<TABLE id=maintable style="POSITION: relative" cellspacing=0 cellPadding=0 align=center border=0 style="BORDER-COLLAPSE: collapse" >
<TBODY>
<TR>
<TD >
<TABLE height="100%" cellspacing=0 cellPadding=0 width=814 align=left style="BORDER-COLLAPSE: collapse" >
<TBODY>
<TR>
<TD style="BACKGROUND: url(/templates/b3009/images/site-shade-left.gif)" width=17><IMG src="/templates/b3009/images/1.gif"></TD>
<TD style="BACKGROUND: #ffffff" vAlign=top>
<TABLE cellspacing=0 cellPadding=0 width="100%" border=0 style="BORDER-COLLAPSE: collapse" >
<TBODY>
<TR>
<TD vAlign=top>
<TABLE style="WIDTH: 713px;HEIGHT: 397px;BORDER-COLLAPSE: collapse" cellspacing=0 cellPadding=0 width=713 align=left border=0>
<TBODY>
<TR>
<TD style="BACKGROUND: url(/templates/b3009/images/top-right-pattern.gif) #e5e5e5" height=97><IMG src="/templates/b3009/images/top-right-leftpattern.gif"></TD></TR>
<TR>
<TD style="BACKGROUND: #cecece" height=1><IMG src="/templates/b3009/images/top-right-leftgreyfade.gif"></TD></TR>
<TR>
<TD style="BACKGROUND: #ffffff" height=1><IMG src="/templates/b3009/images/top-right-leftwhitefade.gif"></TD></TR>
<TR>
<TD style="BACKGROUND: url(/templates/b3009/images/top-right-orangemenu.gif)" height=36><A href="/bundkort.html"><FONT color=#f0f0f0> </FONT></A><SPAN style="FONT-SIZE: 18pt"><A href="/bundkort.html"><FONT color=#f0f0f0> </FONT></A><FONT color=#f0f0f0><A href="/bundkort.html"><FONT color=#f0f0f0>Bundkort </FONT></A><FONT color=#f0f0f0>|</FONT><A href="/harddiske.html"><FONT color=#f0f0f0> Harddiske </FONT></A><FONT color=#f0f0f0>|</FONT><A href="/ram.html"><FONT color=#f0f0f0> Ram </FONT></A><FONT color=#f0f0f0>|</FONT><A href="/processor.html"><FONT color=#f0f0f0> Processor </FONT></A><FONT color=#f0f0f0>|</FONT><A href="/grafikkort.html"><FONT color=#f0f0f0> Graffikkort </FONT></A><FONT color=#f0f0f0>|</FONT><A href="/lydkort.html"><FONT color=#f0f0f0><FONT color=#f0f0f0> Lydkort</FONT> </FONT></A></FONT></SPAN></TD></TR>
<TR>
<TD style="BACKGROUND: #ffffff" height=1><IMG src="/templates/b3009/images/top-right-leftwhitefade.gif"></TD></TR>
<TR>
<TD style="BACKGROUND: #d0d0d0" height=191><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<TABLE style="BACKGROUND: #e6e6e6" cellspacing=0 cellPadding=0 width="100%" border=0 style="BORDER-COLLAPSE: collapse" >
<TBODY>
<TR>
<TD style="BACKGROUND: #ffffff" height=1><IMG src="/templates/b3009/images/1.gif"></TD></TR>
<TR>
<TD >
<TABLE style="BACKGROUND: #e6e6e6;BORDER-COLLAPSE: collapse" cellspacing=0 cellPadding=0 width="100%" align=left border=0>
<TBODY>
<TR>
<TD style="BACKGROUND: #ffffff" width=21></TD>
<TD style="BACKGROUND: #ffffff" width=22></TD>
<TD style="BACKGROUND: #ffffff" width=22></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD style="BACKGROUND: #ffffff" height=1><IMG src="/templates/b3009/images/1.gif"></TD></TR></TBODY></TABLE>
<TABLE style="WIDTH: 784px;HEIGHT: 576px" cellspacing=0 cellPadding=0 width=784 border=0 style="BORDER-COLLAPSE: collapse" >
<TBODY>
<TR>
<TD style="BACKGROUND: url(/templates/b3009/images/content-fade-turk.gif)" width=20><IMG style="WIDTH: 1px;HEIGHT: 1px" height=2 src="/templates/b3009/images/1.gif" width=1></TD>
<TD >
<TABLE height="100%" cellspacing=0 cellPadding=0 width="100%" align=left border=0 style="BORDER-COLLAPSE: collapse" >
<TBODY>
<TR>
<TD height=5><IMG height=1 src="/templates/b3009/images/1.gif"></TD></TR>
<TR>
<TD >
<TABLE height="100%" cellspacing=0 cellPadding=0 width="100%" align=left border=0 style="BORDER-COLLAPSE: collapse" >
<TBODY>
<TR>
<TD width=28><IMG src="/templates/b3009/images/1.gif"></TD>
<TD width=28><IMG src="/templates/b3009/images/1.gif"></TD>
<TD style="BACKGROUND: url(/templates/b3009/images/content-dottedline-background.gif)" width=2><IMG src="/templates/b3009/images/1.gif"></TD>
<TD width=46></TD>
<TD vAlign=top>
<TABLE style="WIDTH: 579px;HEIGHT: 468px;BORDER-COLLAPSE: collapse" height=468 cellspacing=0 cellPadding=0 width=579 align=left border=0>
<TBODY>
<TR>
<TD vAlign=top align=left>
<H2>
<TABLE style="WIDTH: 588px;HEIGHT: 390px" cellspacing=0 cellPadding=0 width=588 border=0 style="BORDER-COLLAPSE: collapse" >
<TBODY>
<TR>
<TD vAlign=top align=left width=136>
<P><SPAN style="FONT-SIZE: 20pt">Produkter</SPAN><SPAN style="FONT-SIZE: 48pt"><SPAN style="FONT-SIZE: 24pt"> </SPAN></SPAN></P>
<P> </P></TD></TR></TBODY></TABLE></H2>
<H2> </H2>
<H2> </H2></TD></TR></TBODY></TABLE></TD>
<TD width=46><IMG src="/templates/b3009/images/1.gif"></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD height=5><IMG src="/templates/b3009/images/1.gif"></TD></TR>
<TR>
<TD style="BACKGROUND: #cecece" height=1><IMG src="/templates/b3009/images/1white.gif"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<TABLE style="BACKGROUND: url(/templates/b3009/images/top-leftmenu-background.gif);BORDER-COLLAPSE: collapse" cellspacing=0 cellPadding=0 width="100%" align=left border=0>
<TBODY>
<TR>
<TD align=middle>
<TABLE style="BACKGROUND: url(/templates/b3009/images/top-leftmenu-background.gif)" height=46 cellspacing=0 cellPadding=0 width="100%" align=left border=0 style="BORDER-COLLAPSE: collapse" >
<TBODY>
<TR>
<TD align=middle width=259></TD>
<TD align=middle><PRE><B></B> </PRE></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD style="BACKGROUND: #f77100" height=15><IMG src="/templates/b3009/images/1.gif"></TD></TR></TBODY></TABLE></TD>
<TD style="BACKGROUND: url(/templates/b3009/images/site-shade-right.gif)" width=17><IMG src="/templates/b3009/images/1.gif"></TD></TR></TBODY></TABLE>
<TABLE style="LEFT: 54px;WIDTH: 717px;POSITION: absolute;TOP: 36px;HEIGHT: 31px;BORDER-COLLAPSE: collapse" cellspacing=0 cellPadding=0 width=717 border=0>
<TBODY>
<TR>
<TD align=middle>
<H4 align=left><SPAN style="FONT-SIZE: 20pt"><A href="/test1.html"><FONT color=#4682b4>Hovedside</FONT></A> </SPAN> </H4></TD></TR></TBODY></TABLE>
<TABLE style="BACKGROUND: none transparent scroll repeat 0% 0%;LEFT: 215px;POSITION: absolute;TOP: 474px;BORDER-COLLAPSE: collapse" borderColor=#000000 height=34 cellspacing=0 cellPadding=0 width=174 border=0>
<TBODY>
<TR>
<TD vAlign=top align=left><A href="/Produkt1b.html"><FONT color=#404040>ABIT AA8XE-3rd </FONT></A><A href="/Produkt1b.html"><FONT color=#404040>eye</FONT></A>
<P>Produkt 2</P>
<P>Produkt 3</P>
<P>Produkt 4</P>
<P>Produkt 5</P><A href="/Produkt1b.html"><FONT color=#404040></FONT></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</DIV></DIV>
</BODY> |
der hvor jeg godt kunne tænke mig det der med popuppen er ved
Kode
<TD style="BACKGROUND: #d0d0d0" height=191><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<TABLE style="BACKGROUND: #e6e6e6" cellspacing=0 cellPadding=0 width="100%" border=0 style="BORDER-COLLAPSE: collapse" > |
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 12:59 |
|
Hvad er dog det for noget fnidder-fnadder kode?
Mange af dine parametre er under afvikling og findes slet ikke i HTML 4.01 strict DTD og i XHTML.
Der findes overhovedet ingen parameter der hedder 'scrover' i <img.../> markøren. Det er som så meget andet en frontpage extension 'ting' fra microsoft som sjældent virker. Det har ALDRIG været en del af HTML.
Jeg kan da heller ikke se du har brugt alt="..." parameteren i dine <img.../> ..og det er en parameter der SKAL være i denne ifølge anbefalingerne fra W3.org. Hvis ikke der skal fremkomme en tekstbox ved mouseover på et billede, skal man tildele alt parameteren en tom streng :
alt=""
Alle markører og parametre skal iøvrigt skrives med småt og værdierne SKAL omgives af anførselstegn!
Jeg forstår ikke du ikke kan få eksemplet Fra : molokyle Dato : 31-01-06 10:50 til at virke?
Hvis du kopiere det direkte herfra, indsætter i Notesblok (notepad.exe), og gemmer (..f.eks. som test.html) virker det glimrende. Selv hvis IKKE du indsætter dit eget billede (..men så får du selvfølgelig 'rødt kryds' og kan se teksten selv uden at lave mouseover). Der skal iøvrigt ikke klikkes på billedet. Musen skal blot føres over dette. når du flytter musen væk fra billedet, forsvinder teksten i pop-up'en.
Jeg har lige lynhurtigt bikset et CSS eksempel sammen til dig, hvor du kan styre tekstboxens/pop-up'ens; farve, font, position mm. på skærmen i forhold til billedet. Du skal ikke klikke blot føre musen hen over billedet.
Kode
<html>
<head>
<title>Span tekst popup på links</title>
</head>
<style type="text/css">
<!--
.pop {position:absolute;z-index:100;}
.pop a {display:block;text-decoration:none;}
.pop a span {display:none;}
.pop a:hover {background:#ffffff;}
.pop a img{border:0px;}
.pop a:hover span {
display: block;
position:relative;
width: 200px;
border:1px solid black;
padding:8px;
margin-top:1px;
z-index:100;
color:#000;
background:yellow;
font-weight:normal;
font-size:14px;
font-family:arial,sans-serif;
}
//-->
</style>
<body>
<div class="pop">
<a href="#" title=""><img src="henrik.jpg" alt=""/><span>Dette er en pop-up tekst ved mouseover.</span></a>
</div>
</body>
</html> |
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 13:06 |
|
Hmm.. måske er scrover parameteren noget der kræves af det script du inkluderer : <SCRIPT src="oodomimagerollover.js" type=text/javascript> ???
En mouseover udskiftning af et billede laves simpelt med enten CSS pseudoklassen :hover ..eller på denne måde ved brug af event modellen i HTML:
Kode
<img src="BILLEDE1.gif" onmouseover="this.src='BILLEDE2.gif'" onmouseout="this.src='BILLEDE1.gif'"/> |
CSS :hover virker nemlig kun på <a..>...</a> markøren i IE, mens alle andre browsere tolker den for alle markører i HTML.
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 13:47 |
|
Det gik lidt stærkt med CSS koden. Her er en version i XHTML 1.1 der validerer korekt hos www.w3.org :
Kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Span tekst popup på links</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
[CDATA[
.pop {position:absolute;z-index:100;}
.pop a {display:block;text-decoration:none;width:163px;}
.pop a span {display:none;}
.pop a:hover {background:#ffffff;}
.pop a img{border:0px;}
.pop a:hover span {
display: block;
position:relative;
border:1px solid black;
padding:8px;
margin-top:1px;
z-index:100;
color:#000;
background:yellow;
font-weight:normal;
font-size:14px;
font-family:arial,sans-serif;
}
]]
//-->
</style>
</head>
<body>
<div>
<span class="pop">
<a href="#" title=""><img src="henrik.jpg" alt="" width="163" height="241"/><span>Dette er en pop-up tekst ved mouseover.</span></a>
</span>
</div>
</body>
</html> |
</MOLOKYLE>
| |
|
altså:
Citat
Hvad er dog det for noget fnidder-fnadder kode? |
dette skal du ikke spørge mig om men det online program jeg bruger til at lave det 
men nu engang så kommer det alligevel til at ligne noget.. www.deathisyourfaith.dk/bundkort.dk
og det der srcover=over.jpg er sådan så når jeg fører musen over billedet så viser den over.jpg i stedet.. det var så meningen at jeg skulle ha et billede af noget tekst så jeg måske kunne gøre det på denne måde.. men det ku jeg uheldigvis ikke :/
og når jeg såmænd bruger det der eksempel Fra : molokyle Dato : 31-01-06 10:50
så viser den teksten hele tiden hvis jeg ikke har en fil kaldet henrik.jpg . men hvis jeg finder en anden fil og omdøber den til henrik.jpg så viser den kun billedet.. og der sker ingen reaktion hvis jeg tager musen over..
og til sidst: hvis du finder en metode som virker: kan du så plz bare sætte den ind i den kodning jeg har sendt til dig? for ka virkelig ikke finde ud af at sætte det ind.. har prøvet et par gange med andres metoder..
| |
|
hmm ser ud til den nyere du sendte virker fint hvis jeg sætter koden ind i notesblok og finder et billede jeg kalder henrik.jpg
men hvordan hulen sætter jeg det dog ind?!
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 15:50 |
|
Jf. Fra : molokyle Dato : 31-01-06 10:50
Citat
..og der sker ingen reaktion, hvis jeg tager musen over.. |
Her kommer den igen uploadet : http://frip.dk/molokyle/temp/alt_i_img.html
..ellers er det din browser der er noget i vejen med
..og jeg ka' ik' bruge din kode til noget, dels da kandu har 'ædt' de lange linier, dels da alle filer du henviser til : *.js og *.gif mv. jo ikke er noget jeg kan se. Upload siden og læg et link, så har jeg større chance for at vejlede dig.
Hvilken kode vil du sætte ind? Jf.
Citat
..men hvordan hulen sætter jeg det dog ind?! |
 </MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 15:58 |
| | |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 16:07 |
|
Man SKAL bruge alt parameteren i img : http://www.w3schools.com/tags/tag_img.asp
..se 'Required Attributes'
..og det gør du jo ikke på dine sider :
Kode
<IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"><IMG style="WIDTH: 119px;HEIGHT: 194px" height=374 src="/question.gif" width=275 srcover="over.jpg"> |
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 16:17 |
| | |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 16:21 |
| | |
|
Altså... Kunne du ikke "bare" indsætte den kode jeg skal bruge til at lave de spørgsmålstegns billeder og så skriv SKRIV HER eller noget i den retning? det vil gøre det hele meget nemmere og udfylde hvad jeg har bedt om..
| |
| Kommentar
Fra : sofus.dk |
Dato : 31-01-06 17:21 |
|
Brug for pokker da det program jeg har lagt ud, simplere kan det ikke fåes.
Du kan lave alt med det.
Du indsætter koden mellem head og body, i din side.
// You must put this code in the <HEAD> section of your HTML page
// Made with Dyro Pop Maker 1.6
// http://www.Dyro.Biz
// Come and get more free products :)
function PopWidnow(url_pop)
{
var PopWidth=400;
var PopHeight=300;
var PopLeft=100;
var PopTop=100;
DyroBiz=window.open(url_pop,'DyroBiz','toolbar=no,status=no,menubar=no,location=no,directories=no,resizable=no,scrollbars=no,width='+PopWidth+',height='+PopHeight+',top='+PopTop+',left='+PopLeft);
}
// End hiding script from old browsers -->
</Script></head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p><a onmouseover="PopWidnow(' http://www.kandu.dk/spg82261.aspx')" alt="Pop Window">Click
Me !!!</a> </p>
<p> </p>
</body>
</html>
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 17:31 |
| | |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 17:37 |
|
Ps, sofus dk har du da aldrig hørt om at danne HTML pop-up's 'on the fly' med DOM objektet innerHTML ?
Kode
<html>
<head>
<title>Centreret billede popup</title>
<script type="text/javascript">
function show_popup(picture,text)
{
<!--
var txt="";
if(!text=="")txt=text;
var pic=new Image();
pic.src=picture;
var pop=window.createPopup();
var leftpos=(document.body.clientWidth-pic.width)/2;
var toppos=(document.body.clientHeight-pic.height)/2;
var popbody=pop.document.body;
popbody.style.border="solid #000 1px";
popbody.innerHTML="<img src='"+picture+"' alt='"+txt+"' style='border:0'>";
pop.show(leftpos,toppos,pic.width+1,pic.height+1,popbody);
}
//-->
</script>
</head>
<body>
<button onclick="show_popup('henrik.jpg','Henrik');">Åbn pop-up billede!</button>
</body>
</html> |
..eller med en statisk variabel?
Kode
<html>
<head>
<title>Centreret billede popup</title>
<script type="text/javascript">
function show_popup(picture,text)
{
<!--
var txt="";
if(!text=="")txt=text;
var pic=new Image();
pic.src=picture;
var pop=window.createPopup();
var leftpos=(document.body.clientWidth-pic.width)/2;
var toppos=(document.body.clientHeight-pic.height)/2;
var popbody=pop.document.body;
popbody.style.border="solid #000 1px";
popbody.innerHTML="<img src='"+picture+"' alt='"+txt+"' style='border:0'>";
pop.show(leftpos,toppos,pic.width+1,pic.height+1,popbody);
}
//-->
</script>
</head>
<body>
<button onclick="show_popup('henrik.jpg','Henrik');">Åbn pop-up billede!</button>
</body>
</html> |
</MOLOKYLE>
| |
|
Molekyle > Nu har jeg brugt det der Alt..
hvis du er interesseret så kig på www.deathisyourfaith.dk/bundkort.html og kig på spørgsmålstegnene
Ved du om man kan gøre så skriften fra alt bliver større? skal jo vise det til hele min klasse og det bliver nok på et lærred jo så vil værre 100% sikker på det bliver stort nok !
PS:
Tak fordi du virkelig gider hjælpe mig så meget !
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 18:00 |
| | |
|
ok.. så foretrækker jeg bare at læse højt hvis der ikke er nogen der kan læse det !!!
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 18:09 |
|
Øeh... det hjælper ikke engang at ændre skriftstørrelse, når det kommer til alt parameteren
..har jeg lige fundet ud af
Jeg tøffer lige lidt rundt på nettet og ser om der findes et fif.
..for som du nok har bemærket ER det altså den nemmeste løsning
 </MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 18:12 |
|
Husk at du kan lave lidt 'luft' i teksten:
Kode
alt="Et bundkort er en af de vigtigste dele i en computer.
Det er bundkortet alle de andre dele skal sluttes til.
Derfor er det en god idé at du har tjekket efter om de øvrige dele du skal købe til computeren passer til bundkortet." |
..i selve HTML koden, hvilket øger læsbarheden
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 18:16 |
|
..og så skriver jeg lige til kandu teamet omkring problemet med lange kodelinjer uden tekstombrydning, som i dit eksempel : Fra : ME.alexander Dato : 31-01-06 12:28
Dét må må vi håbe kan rettes
Happy coding....
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 18:25 |
|
Det er hermed gjort
Ha' det 'najs' ME.alexander ...og jeg vender tilbage hér, hvis jeg finder en løsning mht. størrelse af alt="..." teksten
..måske først i morgen.
Takker for påængårnø 
 </MOLOKYLE>
| |
|
hehe ! jaja vi ved jo ikke endnu hvor snart du skal hjælpe mig
| |
|
Ok NU er jeg komplet forvirret  Nu virkede det der alt tingenot i mit første dokument men nu gider det ikke virke i det næste den skriver "Alle og så ikke mere den burde ellers skrive et par linier
| |
| Kommentar
Fra : molokyle |
Dato : 31-01-06 20:04 |
|
Hvis det er : http://www.deathisyourfaith.dk/bundkort.html ?
..så virker det stadig i IE ! (..hos mig)
I Firefox og Netscape 8.01 (..i Mozilla mode) skal man højreklikke; vælge : Egenskaber og dernæst Maximere vinuet for at læse alt="..." teksten (..lidt ufikst, når nu det er en W3.org rekommendation! )
I Opera må man kigge i kildekoen for at læse alt parameterens indhold.
Safari ...kan jeg ikke udtale mig om
...men måske kender jeg blot ikke nok til indstillingerne i div. browsere?
</MOLOKYLE>
| |
|
ja for syv søren da det gik sq stærkt!
| |
 | 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.
| |
|
|