Just nu i M3-nätverket
Jump to content

Beskrivning på länkar i css box


Ro Mak

Recommended Posts

Har suttit i ett antal timmar nu, men inte blir jag klokare för det. Problemet är att jag inte får det här att funka. Har skapat en box i css, i

denna box så tänker jag lägga till länkar. När man pekar på länkarna så ska man få upp en beskrivning. problemet är att beskrivningen hamnar bakom skicktet. Bifogar koden för sidan.

Skulle vara evigt tacksam om någon kunde hjälpa mig.

 

 

<html>

<head>

<title>Titel på sidan</title>

 

<script language="JavaScript">

 

<!-- Begin

function popUp() {

props=window.open('hello.htm', 'poppage', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=350, height=300 left = 100, top = 100');

}

// End -->

</script>

<style type="text/css">

<!--

.box {

padding: 5px;

height: 100px;

width: 200px;

background-color: #99CC99;

border: 3px solid #006633;

}

-->

<style type="text/css">

<!--

.box1 {

padding: 5px;

height: 460px;

width: 350px;

}

-->

</style>

</head><BODY onLoad="javascript:popUp()">

<DIV ID="lanktexten" STYLE="position:absolute; visibility:hidden;"></DIV>

 

 

<SCRIPT LANGUAGE="javascript">

 

//***---HTML-taggar före texten (i rutan som poppar upp)

html_fore="<TABLE CELLPADDING=2 BORDER=1 CELLSPACING=0><TR><TD STYLE='background-color: orange; font-family: arial, verdana; font-size: 8pt'>"

 

//***---HTML-taggar efter texten (i rutan som poppar upp)

html_efter="</TD></TR></TABLE>"

 

//***---Rutans övre vänstra kant bör inte vara exakt där musen är, fördelaktigt är att förskjuta den lite. Testa dig fram till en förskjutning som passar din sida. Både negativa och positiva värden kan anges.

Xled=15

Yled=-15

 

 

 

divnamn="lanktexten";

 

function lagerinfo_visa(txt)

{

if (txt)

{

txt=html_fore+txt+html_efter

if (document.all)

{

document.all[divnamn].innerHTML=txt;

document.all[divnamn].style.visibility="visible";

}

else if (document.layers)

{

document[divnamn].document.open();

document[divnamn].document.write(txt);

document[divnamn].document.close();

document.layers[divnamn].visibility="visible";

}

}

else

{

if (document.all)

{

document.all[divnamn].innerHTML="";

document.all[divnamn].style.visibility="hidden";

}

else if (document.layers)

{

document[divnamn].document.open();

document[divnamn].document.write("");

document[divnamn].document.close();

document.layers[divnamn].visibility="hidden";

}

}

}

 

 

if (document.all)

{

document.onmousemove = musen_flyttar;

}

else if (document.layers)

{

window.captureEvents(Event.MOUSEMOVE);

window.onMouseMove = musen_flyttar;

}

 

 

var Xmusposition, Ymusposition;

 

function musen_flyttar(ev)

{

if (document.all)

{

Xmusposition = window.event.x;

Ymusposition = window.event.y;

}

else if (document.layers)

{

Xmusposition = ev.pageX;

Ymusposition = ev.pageY;

}

flytta_lager(divnamn,Xmusposition+Xled,Ymusposition+Yled);

}

 

function flytta_lager(lagernamn,x,y)

{

if (document.all)

{

document.all[lagernamn].style.left = x+document.body.scrollLeft;

document.all[lagernamn].style.top = y+document.body.scrollTop;

}

else if (document.layers)

{

document.layers[lagernamn].left = x;

document.layers[lagernamn].top = y;

}

}

//-->

</SCRIPT>

<h2><center>text<p></center></h2>

<p class="box" style="position: absolute; top: 50; left: 5;">

 

<A HREF="sida2.html" onMouseOver="lagerinfo_visa('<B>Viktigt!</B>');" onMouseOut="lagerinfo_visa();">Länk 2</A><BR>

<A HREF="sida3.html" onMouseOver="lagerinfo_visa('Mina<BR>länkar.');" onMouseOut="lagerinfo_visa();">Länk 3</A>

</p>

<p class="box1" <span style="position: absolute; top: 50; left: 250;"><img src="bildjaghar.jpg" alt="" width="350" height="460" border="0"></span>

</p>

</body>

</html>

 

Niklas

 

Link to comment
Share on other sites

Kopiera detta och kolla om de kan va nåt.

Lite smärre ändringar bara

 

<html>

<head>

<title>Titel på sidan</title>

 

<script language="JavaScript">

 

<!-- Begin

function popUp() {

props=window.open('hello.htm', 'poppage', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=350, height=300 left = 100, top = 100');

}

// End -->

</script>

 

<style type="text/css">

<!--

.box {

padding: 5px;

height: 100px;

width: 200px;

background-color: #99CC99;

border: 3px solid #006633;

}

-->

 

<style type="text/css">

<!--

.box1 {

padding: 5px;

height: 460px;

width: 350px;

}

-->

</style>

 

</head>

<BODY onLoad="javascript:popUp()">

<DIV ID="lanktexten" STYLE="position:absolute; visibility: hidden;"></DIV>

 

 

<SCRIPT LANGUAGE="javascript">

 

//***---HTML-taggar före texten (i rutan som poppar upp)

html_fore="<TABLE CELLPADDING=2 BORDER=1 CELLSPACING=0><TR><TD STYLE='background-color: orange; font-family: arial, verdana; font-size: 8pt'>"

 

//***---HTML-taggar efter texten (i rutan som poppar upp)

html_efter="</TD></TR></TABLE>"

 

//***---Rutans övre vänstra kant bör inte vara exakt där musen är, fördelaktigt är att förskjuta den lite. Testa dig fram till en förskjutning som passar din sida. Både negativa och positiva värden kan anges.

Xled=15

Yled=-15

 

 

 

divnamn="lanktexten";

 

function lagerinfo_visa(txt)

{

if (txt)

{

txt=html_fore+txt+html_efter

if (document.all)

{

document.all[divnamn].innerHTML=txt;

document.all[divnamn].style.visibility="visible";

}

else if (document.layers)

{

document[divnamn].document.open();

document[divnamn].document.write(txt);

document[divnamn].document.close();

document.layers[divnamn].visibility="visible";

}

}

else

{

if (document.all)

{

document.all[divnamn].innerHTML="";

document.all[divnamn].style.visibility="hidden";

}

else if (document.layers)

{

document[divnamn].document.open();

document[divnamn].document.write("");

document[divnamn].document.close();

document.layers[divnamn].visibility="hidden";

}

}

}

 

 

if (document.all)

{

document.onmousemove = musen_flyttar;

}

else if (document.layers)

{

window.captureEvents(Event.MOUSEMOVE);

window.onMouseMove = musen_flyttar;

}

 

 

var Xmusposition, Ymusposition;

 

function musen_flyttar(ev)

{

if (document.all)

{

Xmusposition = window.event.x;

Ymusposition = window.event.y;

}

else if (document.layers)

{

Xmusposition = ev.pageX;

Ymusposition = ev.pageY;

}

flytta_lager(divnamn,Xmusposition+Xled,Ymusposition+Yled);

}

 

function flytta_lager(lagernamn,x,y)

{

if (document.all)

{

document.all[lagernamn].style.left = x+document.body.scrollLeft;

document.all[lagernamn].style.top = y+document.body.scrollTop;

}

else if (document.layers)

{

document.layers[lagernamn].left = x;

document.layers[lagernamn].top = y;

}

}

//-->

</SCRIPT>

<h2><center>text<p></center></h2>

<p class="box" style="position: absolute; top: 50; left: 5;">

 

<A HREF="sida2.html" onMouseOver="lagerinfo_visa('<B><FONT SIZE=2>Menade du så här kanske ? </FONT> ');" onMouseOut="lagerinfo_visa();">Länk 2</A><BR>

<A HREF="sida3.html" onMouseOver="lagerinfo_visa('<B><FONT SIZE=2>Ändra bara Box till Box1. </FONT> ');" onMouseOut="lagerinfo_visa();">Länk 3</A>

 

<h2><center>text<p></center></h2>

<p class="box1" style="position: absolute; top: 200; left: 5;">

 

<A HREF="sida2.html" onMouseOver="lagerinfo_visa('<B><FONT SIZE=2>Menade du så här kanske ? </FONT> ');" onMouseOut="lagerinfo_visa();">Länk 2</A><BR>

<BR>

<A HREF="sida3.html" onMouseOver="lagerinfo_visa('<B><FONT SIZE=2>Ändra bara Box till Box1. </FONT> ');" onMouseOut="lagerinfo_visa();">Länk 3</A>

 

</p>

<p class="box1" <span style="position: absolute; top: 50; left: 250;"><img src="bildjaghar.jpg" alt="" width="350" height="460" border="0"></span>

</p>

</body>

</html>

 

 

[inlägget ändrat 2003-02-22 11:12:10 av BoEriksson]

Link to comment
Share on other sites

Måste du ha en färgad ruta, du kan väl lägga in bgcolor i body istället.

 

Jag menade att du bara skulle använda denna kod att läggas in direkt före </BODY>

 

<p class="box1" style="position: absolute; top: 20; left: 5;">

<A HREF="sida2.html" onMouseOver="lagerinfo_visa('<B><FONT SIZE=2>Menade du så här kanske ? </FONT> ');" onMouseOut="lagerinfo_visa();">Länk 2</A><BR>

<A HREF="sida3.html" onMouseOver="lagerinfo_visa('<B><FONT SIZE=2>Ändra bara Box till Box1. </FONT> ');" onMouseOut="lagerinfo_visa();">Länk 3</A>

</p>

<p class="box1" <span style="position: absolute; top: 50; left: 250;"><img src="bildjaghar.jpg" alt="" width="350" height="460" border="0"></span>

</p>

 

Link to comment
Share on other sites

Claes Persson

I CSS-information för dina lager, skriv in:

z-index: 5;

 

Vilket värde du ger z-index spelar ingen roll, bara du ger det lagret du vill ska ligga överst, högst.

 

Så länkbeskrivningen ska alltså ha högre z-index än det andra...

 

Link to comment
Share on other sites

<html>

<head>

<title>Titel på sidan</title>

 

<script language="JavaScript">

 

<!-- Begin

function popUp() {

props=window.open('hello.htm', 'poppage', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=350, height=300 left = 100, top = 100');

}

// End -->

</script>

 

<style type="text/css">

<!--

.box {

z-index: -1;

padding: 10px;

height: 100px;

width: 200px;

background-color: #99CC99;

border: 3px solid #006633;

}

-->

 

<style type="text/css">

<!--

.box1 {

z-index: -1;

padding: 5px;

height: 460px;

width: 350px;

}

-->

</style>

 

</head>

<BODY onLoad="javascript:popUp()">

<DIV ID="lanktexten" STYLE="position:absolute; visibility: hidden;"></DIV>

 

 

<SCRIPT LANGUAGE="javascript">

 

//***---HTML-taggar före texten (i rutan som poppar upp)

html_fore="<TABLE CELLPADDING=2 BORDER=1 CELLSPACING=0><TR><TD STYLE='background-color: orange; font-family: arial, verdana; font-size: 8pt'>"

 

//***---HTML-taggar efter texten (i rutan som poppar upp)

html_efter="</TD></TR></TABLE>"

 

//***---Rutans övre vänstra kant bör inte vara exakt där musen är, fördelaktigt är att förskjuta den lite. Testa dig fram till en förskjutning som passar din sida. Både negativa och positiva värden kan anges.

Xled=25

Yled=-20

 

 

 

divnamn="lanktexten";

 

function lagerinfo_visa(txt)

{

if (txt)

{

txt=html_fore+txt+html_efter

if (document.all)

{

document.all[divnamn].innerHTML=txt;

document.all[divnamn].style.visibility="visible";

}

else if (document.layers)

{

document[divnamn].document.open();

document[divnamn].document.write(txt);

document[divnamn].document.close();

document.layers[divnamn].visibility="visible";

}

}

else

{

if (document.all)

{

document.all[divnamn].innerHTML="";

document.all[divnamn].style.visibility="hidden";

}

else if (document.layers)

{

document[divnamn].document.open();

document[divnamn].document.write("");

document[divnamn].document.close();

document.layers[divnamn].visibility="hidden";

}

}

}

 

 

if (document.all)

{

document.onmousemove = musen_flyttar;

}

else if (document.layers)

{

window.captureEvents(Event.MOUSEMOVE);

window.onMouseMove = musen_flyttar;

}

 

 

var Xmusposition, Ymusposition;

 

function musen_flyttar(ev)

{

if (document.all)

{

Xmusposition = window.event.x;

Ymusposition = window.event.y;

}

else if (document.layers)

{

Xmusposition = ev.pageX;

Ymusposition = ev.pageY;

}

flytta_lager(divnamn,Xmusposition+Xled,Ymusposition+Yled);

}

 

function flytta_lager(lagernamn,x,y)

{

if (document.all)

{

document.all[lagernamn].style.left = x+document.body.scrollLeft;

document.all[lagernamn].style.top = y+document.body.scrollTop;

}

else if (document.layers)

{

document.layers[lagernamn].left = x;

document.layers[lagernamn].top = y;

}

}

//-->

</SCRIPT>

<h2><center>text<p></center></h2>

<p class="box" style="position: absolute; top: 50; left: 5;">

 

<A HREF="sida2.html" onMouseOver="lagerinfo_visa('<B><FONT SIZE=2>Menade du så här kanske ? </FONT> ');" onMouseOut="lagerinfo_visa();">Länk 1</A>

<BR>

<A HREF="sida3.html" onMouseOver="lagerinfo_visa('<B><FONT SIZE=2>Jag tror nästan det va</FONT> ');" onMouseOut="lagerinfo_visa();">Länk 2</A>

<BR>

<A HREF="sida2.html" onMouseOver="lagerinfo_visa('<B><FONT SIZE=2>Har bara lagt till några länkar </FONT> ');" onMouseOut="lagerinfo_visa();">Länk 3</A>

<BR>

<A HREF="sida3.html" onMouseOver="lagerinfo_visa('<B><FONT SIZE=2>Va tycker du, Inte så illa va ?</FONT> ');" onMouseOut="lagerinfo_visa();">Länk 4</A>

 

</body>

</html>

 

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...