Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Beskrivning på länkar i css box

Ro Mak

Startad av Ro Mak,
i Webbutveckling

Rekommendera Poster

Ro Mak

Ro Mak

Postad
Postad

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

 

Länk till kommentar
Dela på andra webbplatser
BoEriksson

BoEriksson

Postad
Postad

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]

Länk till kommentar
Dela på andra webbplatser
BoEriksson

BoEriksson

Postad
Postad

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>

 

Länk till kommentar
Dela på andra webbplatser
Claes Persson

Claes Persson

Postad
Postad

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

 

Länk till kommentar
Dela på andra webbplatser
BoEriksson

BoEriksson

Postad
Postad

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

 

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...