/ Forside/ Teknologi / Internet / Hjemme sider / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn 

Kodeord  


Reklame
Top 10 brugere
Hjemme sider
#NavnPoint
molokyle 23766
bentjuul 7763
Klaudi 7497
BjarneD 4584
severino 4460
Manse9933 4366
disken 3947
natmaden 3885
miritdk 3593
10  refi 3578
Popup
Fra : ME.alexander
Vist : 456 gange
150 point
Dato : 31-01-06 09:26

Hey... Jeg kunne godt tænke mig at på min hjemmeside når jeg klikker på et bestemt billede så popper der et LILLE popup vindue op med noget tekst i.. Popup vinduet skal ikke være meget større end det teksten fylder..

Når jeg så skal have den lukket så kunne jeg godt tænke mig at man bare skal klikke inde i selve vinduet i stedet for at man skal fumle rundt med at klikke på krydset.. Jeg skal nemlig bruge det til en projektfremlæggelse og så er det jo lidt uheldigt hvis man står der er fumler med tingene...

 
 
Accepteret svar
Fra : molokyle

Modtaget 150 point
Dato : 31-01-06 10:08

Jeg er på job nu, men jeg kan skrive dig en sådan rutine i aften, hvis ikke andre er kommet med en løsning.

</MOLOKYLE>

Kommentar
Fra : ME.alexander


Dato : 31-01-06 10:09

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&#229;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();">&#197;bn</a>
</p>
<p>
<a href="javascript:hideMe();">Luk</a>
</p>
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 31-01-06 10:21

Ps. Hvis du er sikker på der kun benyttes IE, kan jeg godt komme op med en simplere løsning, men Firefox, Opera og andre tabbed browsers vil i så fald åbne en ny tab i stedet for en pop-up, hvilket er ret usmart

</MOLOKYLE>

Kommentar
Fra : sofus.dk


Dato : 31-01-06 10:22

Hvis du ikke vil have det i kode, er her i lille program, der laver popup, med alle indstillinger
http://www.steenmartinsen.dk/programmer/Dyro%20Pop%20Maker.zip

Kommentar
Fra : sofus.dk


Dato : 31-01-06 10:27

Du kan også bruge dette som jeg har lagt under Tips.
Har endnu flere muligheder, ikke kun popup.
Skal ikke installeres

http://www.kandu.dk/tip13453.aspx

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 : sofus.dk


Dato : 31-01-06 10:29

Men lad være med at lave disse irriterende popups, der dukker op i utide.
Det holder mennesker væk fra din side.


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>

Kommentar
Fra : ME.alexander


Dato : 31-01-06 12:21

fint fint det prøver jeg da så ;)


Kommentar
Fra : ME.alexander


Dato : 31-01-06 12:28

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>&nbsp; &nbsp;</FONT></A><SPAN style="FONT-SIZE: 18pt"><A href="/bundkort.html"><FONT color=#f0f0f0>&nbsp;</FONT></A><FONT color=#f0f0f0><A href="/bundkort.html"><FONT color=#f0f0f0>Bundkort&nbsp; </FONT></A><FONT color=#f0f0f0>|</FONT><A href="/harddiske.html"><FONT color=#f0f0f0>&nbsp; Harddiske&nbsp; </FONT></A><FONT color=#f0f0f0>|</FONT><A href="/ram.html"><FONT color=#f0f0f0>&nbsp; Ram &nbsp;</FONT></A><FONT color=#f0f0f0>|</FONT><A href="/processor.html"><FONT color=#f0f0f0>&nbsp; Processor &nbsp;</FONT></A><FONT color=#f0f0f0>|</FONT><A href="/grafikkort.html"><FONT color=#f0f0f0>&nbsp; Graffikkort &nbsp;</FONT></A><FONT color=#f0f0f0>|</FONT><A href="/lydkort.html"><FONT color=#f0f0f0><FONT color=#f0f0f0>&nbsp;&nbsp;&nbsp; Lydkort</FONT>&nbsp;&nbsp;&nbsp; </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">&nbsp;</SPAN></SPAN></P>
<P>&nbsp;</P></TD></TR></TBODY></TABLE></H2>
<H2>&nbsp;</H2>
<H2>&nbsp;</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>&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;</SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</H4></TD></TR></TBODY></TABLE>&nbsp;&nbsp;
<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>

Kommentar
Fra : ME.alexander


Dato : 31-01-06 13:53

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..

Kommentar
Fra : ME.alexander


Dato : 31-01-06 13:55

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 : ME.alexander


Dato : 31-01-06 15:57

Altså m8 www.deathisyourfaith.dk/bundkort.html
også på www.deathisyourfaith.dk/harddiske.html

det er på de der spørgsmålstegn...

Kommentar
Fra : molokyle


Dato : 31-01-06 15:58

'Problemet' med ALT parameteren er at den ikke bliver stående på skærmen ret længe, medmindre man hele tiden bevæger musen en smule

Mere om ALT :

1.) http://www.htmlhelp.com/feature/art3.htm

2.) http://www.cs.tut.fi/~jkorpela/html/alt.html

</MOLOKYLE>

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

..og således ser CSS løsningen ud : http://frip.dk/molokyle/temp/span_popup_text.html

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 31-01-06 16:21

Hvis ikke du kan finde ud af at implementere de angivne løsninger ved de retningslinjer og eksempler du nu har fået?

...bør du nok lade det ligge ligge og finde på noget andet til din fremlægning af projektet

Evt. læse nogle bøger om HTML, CSS og webdesign

Jeg kan kun anbefale :

1.) http://webdesign101.dk/wwwbog/udgave2/index.php
2.) http://webdesign101.dk/xhtml/xhtmlbog/index.php

</MOLOKYLE>

Kommentar
Fra : ME.alexander


Dato : 31-01-06 17:17

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>&nbsp;</p>
</body>

</html>

Kommentar
Fra : molokyle


Dato : 31-01-06 17:27

sofus.dk -> I din løsning skal der først takkes ja til pop-ups (evt. midlertidigt på siden) i browseren. I Opera, Netscape og Firefox vil der ikke blive vist pop-up's, men åbnet nye faneblade, som skal lukkes (..hvilket ME.alexander udtrykkeligt har ladet sig frabedt i spørgsmålet : ...kunne jeg godt tænke mig at man bare skal klikke inde i selve vinduet i stedet for at man skal fumle rundt med at klikke på krydset) Derudover skal der laves en ny HTML side med indholdet i pop-up vinduet. Alt i alt : En uholdbar løsning

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 31-01-06 17:31

Ps. ..og jo sofus.dk: Der findes simplere løsninger med javascript popups, hvis man sætter sig lidt ind i javascript og det at åbne vinduer : http://www.infimum.dk/HTML/JSwindows.html

</MOLOKYLE>

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');">&#197;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');">&#197;bn pop-up billede!</button>
</body>
</html>


</MOLOKYLE>



Kommentar
Fra : molokyle


Dato : 31-01-06 17:41

Nåeh... jo 2 gange det samme fremmer forståelsen

Nej her er eksemplet med et vidue dannes ud fra en string variabel:

Kode
<html>
<script language = javascript>
function image_open(image_loc,img)
{
HTML = "<html><style>body{margin:0px 0px 0px 0px}</style><body onBlur='top.close()'><img src='"+ image_loc +"' border='0' name='load_image' onLoad='window.resizeTo(document.load_image.width+10,document.load_image.height+30)'></body></html>";
settings = 'toolbar=no,scrollbars=no';
popupImage = window.open('','_blank',settings);
popupImage.document.open();
popupImage.document.write(HTML);
popupImage.document.close();
}
</script>
<body>
<a href="JavaScript:image_open('henrik.jpg','img1')"><img src="speed.jpg" border="0" id="img1"></a>
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : ME.alexander


Dato : 31-01-06 17:48

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

Nej du kan ikke lave teksten større. Der er her tale om systemet font som afhænger af hvad du har valgt i din browsers menu : Vis->Tekststørrelse ..eller hvad der vælges under Funktioner->Internetindstillinger...-> og knappen [Hjælp til handicappede...]

Hvis du vil styre fontens størrelse, type mm. må du bruge CSS løsningen :

http://frip.dk/molokyle/temp/span_popup_text.html

..som her er større: http://frip.dk/molokyle/temp/span_popup_text_stor.html

</MOLOKYLE>



Kommentar
Fra : ME.alexander


Dato : 31-01-06 18:05

ok.. så foretrækker jeg bare at læse højt hvis der ikke er nogen der kan læse det !!!

Godkendelse af svar
Fra : ME.alexander


Dato : 31-01-06 18:07

Tak for svaret molokyle.

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>

Kommentar
Fra : ME.alexander


Dato : 31-01-06 18:46

hehe ! jaja vi ved jo ikke endnu hvor snart du skal hjælpe mig

Kommentar
Fra : ME.alexander


Dato : 31-01-06 19:05

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>

Kommentar
Fra : molokyle


Dato : 01-02-06 08:32

Så... nu er 'fejlen' med kodevisning her på kandu blevet rettet

Dét var kvikt: Tak Kandu Team

</MOLOKYLE>

Kommentar
Fra : ME.alexander


Dato : 01-02-06 08:59

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.
Søg
Reklame
Statistik
Spørgsmål : 173462
Tips : 31650
Nyheder : 719565
Indlæg : 6382351
Brugere : 218248

Månedens bedste
Årets bedste
Sidste års bedste