Another couple of coding queries. :')

[thatlauralass]

I know, I know. I'm really not good at this.

I do try though.

 

Anyway, onto the point - I'm currently working on a new layout for a petpage, and I'm struggling with a couple of things. http://www.neopets.com/~Luanolu

 

1: The main issue is I want to have the buttons to the right select different sections of info if you see what I mean. At present all of the info is overlaying on top of each other instead of just appearing when you click the correct button. No doubt I'm missing something in the code, but I just can't see it. If someone could help me fix this I'd be super duper greatful - the full code for my petpage is below.

Edit: I managed to fix it myself; it's some sort of miracle, haha! I've updated the code below in case anyone can help me with me other query.

 

2: I'd REALLY like it if the buttons change image when you hover over them (I have images of plain clouds, which I'd like the buttons to be by default. Then when you hover over them, they change to the clouds with the text on them). I've tried a couple of codes but they don't work unfortunately. I read somewhere that for neopets that you need to treat mouseovers like a table or background or something, but I really don't know enough about it. It's not exactly as important as the issue I'm having above - more of an aesthetic thing, but I'm just wondering if it's possible at all?

<style>
.luanolu {
    background: transparent url("http://i1275.photobucket.com/albums/y450/thatlauralass/lupetpagelu_zps938ba0a8.png");
    width: 580px;
    height: 651px;
    top: 300px;
    left: 120px;
    z-index: 10;
}
.sf {
    display: none;
}
body {
    background-color: #FFD897;
    background-image: url("http://i.imgur.com/rcQLVDt.png");
    top: 200px;
    background-position: 100px 100px;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#nav {
    width: 550px;
    height: 500px;
    top: 225px;
    left: 470px;
    text-align: justify;
    font-family: verdana;
    font-size: 8pt;
    line-height: 15px;
    overflow: hidden;
    padding-right: 10px;
    padding-left: 10px;
    z-index: 5;
}

#scrollingboxes {
    width: 550px;
    height: 500px;
    overflow: auto;}
</style>

<div class="luanolu" style="position: relative;"></div>
<div style="position: absolute; left: 1050px; top: 100px;">
<a href="#about"><img src="//images.weserv.nl/?url=http://i1275.photobucket.com/albums/y450/thatlauralass/1b_zpse7127e3f.png"></a>
<a href="#i"><img src="//images.weserv.nl/?url=http://i1275.photobucket.com/albums/y450/thatlauralass/2b_zps354aa496.png"></a>
<a href="#art"><img src="//images.weserv.nl/?url=http://i1275.photobucket.com/albums/y450/thatlauralass/3b_zps063f6dee.png"></a>
<a href="#adopts"><img src="//images.weserv.nl/?url=http://i1275.photobucket.com/albums/y450/thatlauralass/4b_zpsc8c2a329.png"></a>
</div>


<div id="nav" style="position: absolute;">



<div id="scrollingboxes">
<a name="about"></a>
Luanolu is a slender feline, with her build closely resembling that of a cheetah. Her markings remain like that of her kougra heritage, but the colour of her fur is more subtle - from her time spent in Shenkuu, perhaps?

Her dainty little paws are little use for the knit & grit of battledome life, but her agility is perfect for avoiding tough situations if need be.
<br><br>
</div>

<div id="scrollingboxes">
<a name="i"></a>
Mystery Island.

<br><br>It all started there; amidst the carefree palms and serene waters. A young kougra wandered the beach, watching the birds of the island swoop and swirl in the crystal blue sky. The feline's eyes sparkled their golden hues of delight at the sight of the birds' carefree play; a flicker of envy too, perhaps.

<br><br>The cat's name was Luanolu. A delicate and shy little thing, she was a lot more slender and gentle than the other kougras her age, which caused her to become quite withdrawn and timid. She sighed slightly, and looked back towards the bustle of the tourism at the busier end of the beach. She had been brought up here, but yet only daydreamed of the adventures the rest of Neopia held to her. Where would she begin? She wondered.
<br><br><i>Under construction; check back later!</i>
<br><br>
</div>

<div id="scrollingboxes">
<a name="art"></a>
<br><br>
Under construction! Art here.
<br><br>
</div>

<div id="scrollingboxes">
<a name="adopts"></a>
<br><br>
Under construction! Adoptables here.
<br><br>
</div>
</div>

So yep, if anyone could help me out I'd much appreciate it!

Edited August 24, 2014 by thatlauralass