Notifikationer

Markér alle som læst Log ud

e100 Nybegynder

04. maj 2004 - 13:33 Der er 19 kommentarer og
1 løsning

Fade forsinkelse på text link så man kan nå at trykke på det

Hej,

Jeg har lavet en mouseover effekt på et text link, der viser en række nye links.

Det er så meningen at man skulle kunne nå at pege musen over på de nye links før de forsvinder og når musen så peger på de nye links skal de selvfølgelig heller ikke forsvinde.

Hvordan kan det gøres?

/E100

Synes godt om

e100 Nybegynder

04. maj 2004 - 13:34 #1

Min side kan ses på http://www.transsoft.dk/ts/index.php

Synes godt om

roenving Novice

04. maj 2004 - 13:44 #2

<a class="toplink" onmouseover="vis('microsoft')" onmouseout="setTimeout('skjul(\'microsoft\')',300)" href="/TS/profil/profilIndhold.htm" target="mainframe"> Microsoft</a>

300 er 3/10 sekund ...

-- og så har jeg iøvrigt lavet en kraftig brush-up på nereidFadeObjects, så den for det første understøtter andet end IE (nemlig Gecko-browserne !-), for det andet kan flere forskellige ting:

http://roenving.users.whitehat.dk/WD5Opacity.html

-- og så kunne det se ud som om, du ikke havde brug for visibility, men display, da der så ikke er den underlighed at de forskellige links kommer forskellige steder, men kan komme det samme sted !o]

Synes godt om

e100 Nybegynder

04. maj 2004 - 14:04 #3

Fantastisk, så er der forsinkelse på - men den forsvinder stadig selv om man peger på det nye link - ka´ det ændres?

Synes godt om

roenving Novice

04. maj 2004 - 14:08 #4

I tre bidder:

En linje i script-blokken:

var timer=0;

Linket:

<a class="toplink" onmouseover="vis('microsoft')" onmouseout="timer=setTimeout('skjul(\'microsoft\')',300)" href="/TS/profil/profilIndhold.htm" target="mainframe"> Microsoft</a>

-- og i div'en:

<div id="microsoft" target="mainframe" onmouseover="clearTimeout(timer);">

Synes godt om

e100 Nybegynder

04. maj 2004 - 14:15 #5

Du skal vist have lidt flere point... det er jo fænomenalt!

Sidste ting - kan jeg ophæve "onmouseover="clearTimeout(timer);" fra div´en når jeg peger på et nyt link for oven?

/e100

Synes godt om

e100 Nybegynder

04. maj 2004 - 14:17 #6

Beklager men jeg skal ud af døren nu - jeg er først tilbage engang i aften, men hvis du svarer skal jeg nok sende pointene til dig.

Tak!

/E100

Synes godt om

roenving Novice

04. maj 2004 - 14:20 #7

Du kan sætte en onmouseout="this.style.display='none';"

-- og så vil jeg anbefale dig, at du bruger display='block' og display='none', så alle dine links kommer frem det samme sted !-)

-- og du så i stedet for visibility:hidden; i css har display:none; !o]

Synes godt om

roenving Novice

04. maj 2004 - 14:20 #8

-- og velbekomme '-)

Synes godt om

e100 Nybegynder

04. maj 2004 - 23:08 #9

Jeg kan ikke få det sidste til at virke - men du har da fortjent points!

/E100

Synes godt om

roenving Novice

04. maj 2004 - 23:11 #10

Tak for point ;~}

-- og hvordan kan du ikke få det til at virke ?-)

Synes godt om

e100 Nybegynder

04. maj 2004 - 23:47 #11

Jeg vil gerne have at de blå links der kommer frem fjernes når der peges på et nyt rødt link foroven.

Så har jeg ikke helt fundet ud af hvordan display='block' virker. Det ville jo være lidt smart, hvis visning af alle blå links startede i samme position.

/e100

Synes godt om

e100 Nybegynder

04. maj 2004 - 23:50 #12

hvor mener du jeg skal sætte onmouseout="this.style.display='none';" ?

Synes godt om

roenving Novice

05. maj 2004 - 00:12 #13

Du kan jo prøve at kigge lidt nærmere på teknikkerne her:

<html>
<head>
<title>TransSoft ApS - Software til transport</title>
<link rel="StyleSheet" href="/ts/css/std.css" type="text/css">
<META NAME="Description" CONTENT="TransSoft har leveret software til transportbranchen siden 1993">
<META name="keywords" content="transport, software, navision, concorde, microsoft, erp, økonomisystem, c5, easy, freight, cargo">
<script language="javascript" type="text/javascript">
var menuDivs = ['microsoft','transsoft','hardware','generelt','kontakt'];
function initDivs(){
for(i=0;menuDivs.length>i;i++){
menuDivs[i] = (document.getElementById)?document.getElementById(menuDivs[i]).style:(document.all)?document.all[menuDivs[i]].style:document.layers[menuDivs[i]];
}
}
function vis(obj){
sabine = (document.getElementById)?document.getElementById(obj).style:(document.all)?document.all[obj].style:document.layers[obj];

for(i=0;menuDivs.length>i;i++){
menuDivs[i].display = (menuDivs[i]==sabine)?"block":'none';
}
}
function skjul(obj){
sabine = (document.getElementById)?document.getElementById(obj).style:(document.all)?document.all[obj].style:document.layers[obj];

sabine.display = "none";
}

var timer=0;

</script>
<style type="text/css">
table{width:100%}
div {display:none; margin-left="10px"; float:left;}
.topbox,.middleframe{display:block; margin-left="10px"; float:none;}
.middleframe{height:18px;}
A:link img {border: none;}
A:hover img {border: none;}
A:visited img {border: none;}
</style>

</head>

<body onload="initDivs()">
<table>
<tr>
<td>
<div class="topbox">
<a class="toplink" href="http://www.transsoft.dk/ts/index.php" target="_top"><img src="/TS/Billeder/logoer/tslogo.gif"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" href="" target="mainframe"></a>
<a class="toplink" onmouseover="vis('microsoft')" onmouseout="timer=setTimeout('skjul(\'microsoft\')',1500)" href="/TS/profil/profilIndhold.htm" target="mainframe"> Microsoft </a>
<a class="toplink" onmouseover="vis('transsoft')" onmouseout="timer=setTimeout('skjul(\'transsoft\')',1500)" href="/TS/profil/profilIndhold.htm" target="mainframe"> TransSoft </a>
<a class="toplink" onmouseover="vis('hardware')" onmouseout="timer=setTimeout('skjul(\'hardware\')',1500)" href="/TS/produkter/produkterIndhold.htm" target="mainframe"> Hardware </a>
<a class="toplink" onmouseover="vis('generelt')" onmouseout="timer=setTimeout('skjul(\'generelt\')',1500)" href="/TS/produkter/produkterIndhold.htm" target="mainframe"> Generelt </a>
<a class="toplink" onmouseover="vis('kontakt')" onmouseout="timer=setTimeout('skjul(\'kontakt\')',1500)" href="/TS/produkter/produkterIndhold.htm" target="mainframe"> Kontakt </a>
</div>

<div class="middleframe">
<div id="microsoft">
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> Økonomisystem</a>
</div>
<div id="transsoft">
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> Transport</a>
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> Lønsystem</a>
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> Kunder</a>
</div>
<div id="hardware">
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> PC/Server</a>
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> Sikkerhed</a>
</div>
<div id="generelt">
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> Profil</a>
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> Kampagner</a>
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> Brochurer</a>
</div>
<div id="kontakt">
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> Adresser</a>
<a class="blalink" href="/TS/profil/profilIndhold.htm" target="mainframe" onmouseover="clearTimeout(timer);"> Personale</a>
</div>
</div>
<iframe src="/ts/skabelonIndhold.htm" name="mainframe" id="mainframe" height="100%" width="100%" frameborder="0" framespacing="0" scrolling="no" style="clear:all;">
</iframe><br>
<img src="/ts/billeder/bundbillede/volvohjul1.jpg">
</td>
</tr>
</table>
TransSoft ApS  | Gasværksvej 40  |  DK 9000 Ålborg  |  Telefon: +45 98 11 35 66  |  Telefax: +45 98 11 35 86<br>
</body>

Synes godt om

e100 Nybegynder

05. maj 2004 - 00:14 #14

wow... jeg går igang med at kigge!

Synes godt om

e100 Nybegynder

05. maj 2004 - 00:38 #15

det ser s** ud som noget jeg kan bruge - yes yes yes, helt fantastisk! Mange tak

Synes godt om

roenving Novice

05. maj 2004 - 00:40 #16

-- og spørg bare løs, hvis der er noget, du er usikker på !-)

Synes godt om

e100 Nybegynder

05. maj 2004 - 01:03 #17

Jeg vil gerne have at rammerne (1,2,3,4) ikke rykker ned når jeg peger på mine links. Er det muligt?

Synes godt om

roenving Novice

05. maj 2004 - 01:10 #18

Det er nok den ende, jeg ikke testede, fordi de jo ligger i din iframe, og jeg lavede derfor den simple med at give link-linjen en højde ...

Alt kan lade sig gøre, så tag den højde, jeg satte på (18px !-) og sæt den på !o]

-- og så var det iøvrigt ikke en tilfældighed, at jeg ændrede til divs i stedet for spans, da det principielt ikke er tilladt at lægge block-level elementer inde i spans, så lidt fremtidssikring vil være at gøre så ...

Synes godt om

e100 Nybegynder

05. maj 2004 - 11:20 #19

ooops der kan man bare se - det anede jeg ikke! Det virkede bare fint - så jeg tænkte jo så langt så godt :-), det må jeg så nok hellere rette bagefter!

Tak for den fantastiske assistance!

/e100

Synes godt om

e100 Nybegynder

05. maj 2004 - 11:35 #20

Jeg troede lige jeg var smart og satte følgende ind i mit øverste link:

onclick="clearTimeout(timer);"

Jeg regnede med at så ville de blå links forblive synlige efter at have klikket på øverste røde link! Ak nej sådan gik det ikke!

Har jeg skrevet noget forkert?

/e100

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS