Visa extra information

Hejsan. Nu känns detta som en request, men tyvärr måste jag göra det. Jag har liksom försökt nu ett antal gånger med att försöka fixa fram så att det dyker fram extra information, som man sedan kan välja i, och försvinner sedan genom att man drar ifrån muspekaren från innehållet eller lägger musen på en annan länk så ny information kommer fram.
Men som sagt, jag har ej lyckats så bra. Något liknande som jag är ute efter, finns på:
http://www.gon.nu/forum/section.phtml?f=1
Så ni förstår vad jag menar. Bara lägg muspekaren på en av ikonerna vid sidan om inläggen.

Sedan undrar jag också, phtml, vad är det? Är det så att dom ändrat i servern så den ska köra ASP eller PHP som phtml? Eller vadå?

Hoppas ni kan svara =)
God jul!

Det är nog bara en div som visas onmouseover.

yohpops skrev:

Det är nog bara en div som visas onmouseover.

Klart. Hade blivit förvånad om det var något ufo eller nåt :p
Amen, det är Javascripts funktionen jag inte förstår mig på så jag kan göra så det fungerar likadant. Men jag hittade en meny funktion, som jag använde mig av. Där jag har suttit och fått ta fram alla poster jag ska visa, och fått lägga ditt vart rutan ska komma fram förhand. Något som inte är så värst kul, 30 poster som loopas ut, och så får jag göra en kod som är 1 kilometer lång, bara för att jag ska kunna placera ut diven på rätt ställe. Det bör väll finnas bättre lösningar? Då GON tycks ha lyckats...

Enkel lösning:

<script type="text/javascript">
function show(elmId) {
   document.getElementById(elmId).style.display = "block";
}

function hide(elmId) {
   document.getElementById(elmId).style.display = "none";
}
</script>

<style type="text/css">
.extraText { position: absolute; display: none; background: #ccc; }
</style>

...

<table>
  <tr>
    <td><span onmouseover="show('e01')" onmouseout="hide('e01')">Bild</span></td>
    <td><div class="extraText" id="e01">Extra text</div>
        Lite mer text som delvis döljs när extra-texten syns.</td>
  </tr>
  <tr>
    <td><span onmouseover="show('e02')" onmouseout="hide('e02')">Bild</span></td>
    <td><div class="extraText" id="e02">Extra text</div>
        Lite mer text som delvis döljs när extra-texten syns.</td>
  </tr>
  <tr>
    <td><span onmouseover="show('e03')" onmouseout="hide('e03')">Bild</span></td>
    <td><div class="extraText" id="e03">Extra text</div>
        Lite mer text som delvis döljs när extra-texten syns.</td>
  </tr>
</table>

dectgap skrev:

Enkel lösning:

<script type="text/javascript">
function show(elmId) {
   document.getElementById(elmId).style.display = "block";
}

function hide(elmId) {
   document.getElementById(elmId).style.display = "none";
}
</script>

<style type="text/css">
.extraText { position: absolute; display: none; background: #ccc; }
</style>

...

<table>
  <tr>
    <td><span onmouseover="show('e01')" onmouseout="hide('e01')">Bild</span></td>
    <td><div class="extraText" id="e01">Extra text</div>
        Lite mer text som delvis döljs när extra-texten syns.</td>
  </tr>
  <tr>
    <td><span onmouseover="show('e02')" onmouseout="hide('e02')">Bild</span></td>
    <td><div class="extraText" id="e02">Extra text</div>
        Lite mer text som delvis döljs när extra-texten syns.</td>
  </tr>
  <tr>
    <td><span onmouseover="show('e03')" onmouseout="hide('e03')">Bild</span></td>
    <td><div class="extraText" id="e03">Extra text</div>
        Lite mer text som delvis döljs när extra-texten syns.</td>
  </tr>
</table>

Hmm.. väldigt intressant kod! Hur gör jag igentligen för att kunna göra så rutan stannar kvar någar sekunder? När jag inte har muspekaren på "Bild" längre.

Så här:

<script type="text/javascript">
function show(obj, elmId) {
   if(obj.timeout)
      clearTimeout(obj.timeout);

   document.getElementById(elmId).style.display = "block";
}

function hide(obj, elmId) {
   obj.timeout = setTimeout(function(){ close(elmId) }, 500);
}

function close(elmId) {
   document.getElementById(elmId).style.display = "none";
}
</script>

<style type="text/css">
.extraText { position: absolute; display: none; background: #ccc; }
</style>

...

<table>
  <tr>
    <td><span onmouseover="show(this, 'e01')" onmouseout="hide(this, 'e01')">Bild</span></td>
    <td><div class="extraText" id="e01">Extra text</div>
        Lite mer text som delvis döljs när extra-texten syns.</td>
  </tr>
  <tr>
    <td><span onmouseover="show(this, 'e02')" onmouseout="hide(this, 'e02')">Bild</span></td>
    <td><div class="extraText" id="e02">Extra text</div>
        Lite mer text som delvis döljs när extra-texten syns.</td>
  </tr>
  <tr>
    <td><span onmouseover="show(this, 'e03')" onmouseout="hide(this, 'e03')">Bild</span></td>
    <td><div class="extraText" id="e03">Extra text</div>
        Lite mer text som delvis döljs när extra-texten syns.</td>
  </tr>
</table>

I funktionen hide står "500" för antalet millisekunder det ska dröja innan hjälptexten försvinner. Ändra det till vad du vill.

Ah! Nice. Men nu är det bara en sak till. Jag försöker få DIVén att stanna framme om jag lägger pekaren på den, men den försvinner ändå. Bör inte det fungera:

<div class="extraText" id="e01" onmouseover="show(this, 'e01')" onmouseout="hide(this, 'e01')">Extra text</div>

Javascript tycks aldrig visa nåd mot mig...

Visa lager, med klickbar information

Hej. Jag fick svar i en tidigare tråd om lager, men jag får det inte helt som jag vill.

Koden nedan, är den jag använder, och den fungerar nästan helt som jag vill, bara att lagert försvinner även om jag hinner lägga musen över lagert. Meningen är då, att det ska fördröjas, så att lagert ligger kvar så att man kan lägga musen över, sedan så när musen ligger på lagert, ska det stanna kvar tills man tar musen ifrån lagert, då lagert ska innehålla klickbar information.

Vet inte riktigt om koden kan köras i alla webbläsare, så finns det någon som kan fixa till det problemet, så blir jag väldigt glad =)

Tacksam för all hjälp!

<script type="text/javascript">
function show(obj, elmId) {
   if(obj.timeout)
      clearTimeout(obj.timeout);

   document.getElementById(elmId).style.display = "block";
}

function hide(obj, elmId) {
   obj.timeout = setTimeout(function(){ close(elmId) }, 300);
}

function close(elmId) {
   document.getElementById(elmId).style.display = "none";
}
</script>

<style type="text/css">
.extraText { position: absolute; display: none; background: #ccc; }
</style>

...

<table>
  <tr>
    <td><span onmouseover="show(this, 'e01')" onmouseout="hide(this, 'e01')">Bild</span></td>
    <td><div class="extraText" id="e01" onmouseover="show(this, 'e01')" onmouseout="hide(this, 'e01')">Extra text</div>
        Lite mer text som delvis döljs när extra-texten syns.</td>
  </tr>
</table>

Följdfråga, trådarna slås ihop

RGB - Moderator JavaScript, DHTML