javascript, Visa/dölj div med bildlänk - Behöver hjälp

Permalänk
Medlem

javascript, Visa/dölj div med bildlänk - Behöver hjälp

Hej!

Har lite problem med Java, kan väldigt lite själv men efter en tutorial skapade jag detta, men har ett stort problem: #contentDivImg visas när sidan laddas, tanken är att den skall vara dold, och genom att trycka på imageDivLink så ska den visas. Nu när sidan laddas måste jag först klicka 2 gånger på knappen så den döljs.

Här är koden:

Java

<script language="javascript"> function toggle5(showHideDiv, switchImgTag) { var imageEle = document.getElementById(switchImgTag); var ele = document.getElementById(showHideDiv); if(ele.style.display == "block") { ele.style.display = "none"; imageEle.innerHTML = '<img src="bilder/bilder/knapp_inaktiv.png">'; } else { ele.style.display = "block"; imageEle.innerHTML = '<img src="bilder/bilder/knapp_aktiv.png">'; } } </script>

CSS

#headerDivImg{ left: 573px; top: 793px; position: absolute; visibility: visible; z-index: 6; height: 33px; width: 71px; } #contentDivImg { position: absolute; height: 510px; width: 1000px; z-index: 5; background-image: url(bilder/world_04.png); left: 0px; top: 164px; } .imageDivLink { display: block; width: 26px; height: 27px; text-indent: -99999px; background-image: url(bilder/knapp_inaktiv.png); background-position: bottom; top: 500px; margin: 50px; } .imageDivLink:hover { background-position: 0 0; } #content { position: absolute; height: 1000px; width: 1000px; left: 0px; top: 0px; }

HTML

<div id="keeper"> <div id="headerDivImg"> <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="bilder/bilder/knapp_inaktiv.png"></a> </div><div id="contentDivImg"></div> </div>

Mycket tacksam för hjälp!

Permalänk
Medlem

*JavaScript.

Om du vill att elementet ska vara dolt som standard sätter du display:none i din CSS. Istället för href="javascript:..." bör du använda onclick="..."

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Ska genast testas!

EDIT: Funkade utmärkt, fast med onclick="" så försvann "handen" när man förde musen över... men det funkade endå. Går det att få till det så handen dyker upp ändå?

Permalänk
Medlem

Denna CSS gör att din muspekare ändras när man hovrar.

element:hover { cursor: hand;}

Läs mer om CSS cursor control här
http://rainbow.arch.scriptmania.com/css/css_cursor_control.ht...

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem

Tack så mycket! Har mer eller minde löst allt nu

Tänke passa på att fråga om det går att lägga in en "hover" där bilden byts mot en annan, och som inte bråkar med Javascript, eller kan läggas in i Javascript.
Tidigare har detta skett i CSS men nu verkar den ignorera CSS och bara gå efter bildlänkarna jag lägger i Javascripten. Går det enkelt att lösa?

Permalänk
Medlem
Skrivet av MB™:

Tack så mycket! Har mer eller minde löst allt nu

Tänke passa på att fråga om det går att lägga in en "hover" där bilden byts mot en annan, och som inte bråkar med Javascript, eller kan läggas in i Javascript.
Tidigare har detta skett i CSS men nu verkar den ignorera CSS och bara gå efter bildlänkarna jag lägger i Javascripten. Går det enkelt att lösa?

Kan tyvärr inte hjälpa dig med det, jag har som högst använt jQuery, vilket är ett biblotek som gör att jag slipper skriva javascriptfunktionerna.
Skulle dock rekommendera jQuery över javascript för enkelhetens skull.

Men jag antar att du, via javascript, kan editera CSS elementet via javascriptet när klicket görs.(om jag förstod din fråga rätt).

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti