Changing a div background using links (working on a fun project for kids)

JavaScript
1

Hello, My name is Tanya and I am new to this place so please bear with me if I miss step. I promise you that is not my intention.

I am working on a small project for a friend of mine that does daycare. I want the background image to swap out when a link is either clicked on or moused over (for the kids too young to click well) Then to go back to the original image once the mouse is moved off the link.

I have read every tutorial on the web that I can find but my javascript abilities are pretty non existent an no matter what I try it doesn’t seem to work.

This is the code that I have - if anyone has a little time and can help me sort this out I would be very grateful. The images that I want the background to swap to are included in the anchor elements. THANKS IN ADVANCE!

Link: http://idesigntheweb.com/test/tanyaslogos-test.html

[code]

#main { width:547px; height: 525px; background-image:url(http://idesigntheweb.com/test/main.jpg); } #links { list-style-type:none; margin-top:40px; line-height:50px; float:right; width:220px; font-family: Verdana, Geneva, sans-serif; color: #000; text-align:center; font-size:40px; font-weight:bold; } #links a{ color:#000; text-decoration:none; } #links a:hover{ color:#03F; text-decoration:underline; }
[/code]
2

Question: for those users who click the link, will it be the same situation where as soon as the mouse leaves, the background image changes back to the original state?

3

Yes please :slight_smile:

4

Oh well - I guess it can’t be done.

I wanted to thank the people who took the time to look at it and I hope that everyone has a great week!

Sincerely,
Tanya

5

Edit to clear click event.
Bit late but here is a working example: http://jsfiddle.net/zm41cgwh/5/

6

OMG! djsmithme - That is fantastic! THANK YOU SO MUCH!

You are totally amazing. If I could still have kids I would name one after you!

I do have one small issue / question if you have a second. It works AMAZINGLY well on the JSfiddle site but when I move it to my site it dies a slow and painful death.

Can you take a peek and see what I am doing wrong?

http://idesigntheweb.com/test/tanyaslogos-test.html

Again THANK YOU! THANK YOU! THANK YOU!

7

Try this:

Demo of tanyaslogos

No JavaScript :slight_smile:

8

Thank you so much John_Betong! I love the simplicity of not using javascript because I am pretty much clueless with that particular language however I really need the “alphabet” to stay within the image box.

I guess I could stack the the letters over the image using a z-index. This has definitely given me food for thought and so much more!

I really appreciate you taking the time to do all that work. The kids are really gonna love this!

THANK YOU AGAIN! You’re the best!
Tanya

1 Like
9

Hi @tanyaslogos

I am glad that you liked the simplicity and not having to use JavaScript. It was not easy because of having to use z-index to overlay the alphabetic buttons on top of the image and then to underlay the hovered image beneath the alphabetical links.

It would have been far easier to have smaller images without the image excess white-space - which is not used.

Anyway it is now appears to satisfy your requirements and I will leave it up to you to change the fonts, text-spacing, line-height and to find images relating to the remaining letters of the alphabet. Looking forward to seeing the result…

Have fun :slight_smile:

10

The only thing wrong is you havn’t included the Jquery Libary.

If you are going to be connected to the internet just add the following just before </body> tag

<!--[if lt IE 9]>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!--<![endif]-->

If you are not going to have internet then download jquery: https://jquery.com/download/
and add a link to it

<script src="/path/to/jquery/2.0.1/jquery.min.js"></script>
11

Thank YOU John_Betong! I feel horrible because I didn’t mean for you to do all that extra work. I REALLY REALLY appreciate it however! You really went the extra mile and thank you just doesn’t seem to do the trick.

If you message me your paypal email address I would love to buy you a couple of beers.

I still have a lot of work to do on (graphically) for this project - so far the only image that is ready is the first image. The others I just threw on there from other projects.

So I have 24 images to draw but I wanted to make sure it was possible before I got to far into the graphics.

With that being said I will post the final project when it is done :slight_smile:

THANKS AGAIN!

1 Like
12

Ahhhhh thank you djsmithme!

I figured it had to be something. I copied / pasted what you sent and then promptly bounced my forehead off my desktop a few times because it still didn’t work. lol

Then I took a few breaths and looked at the code and noticed the missing http:

WHEW!!! IT’S ALIVE! :slight_smile:

I really want to thank you again for all your help - if you get a second can you message me your paypal address? I would like to buy you a few cold beverages for all your help!

THANKS AGAIN!
Tanya

13

Glad to help. No need it’s for the kiddies. Have fun.

14

Awe djsmithme! I appreciate it as will the kids I am sure. HOWEVER – I tend to hoard code like a squirrel hoards nuts so there is a good possibility that I will find another use for this somewhere down the line.

With that being said - I would still love to buy you a few rounds as a thank you. It will make me happy!

:slight_smile:

15

All help in the forums is free and voluntary otherwise it would change the nature of the forum and become a jobs list instead.:slight_smile:

1 Like
16

Hello PaulOB,

I understand completely. In my defense however - I wasn’t offering to pay for services rendered. I was offering to buy them a few beers for being so great. Believe me - I can’t afford to pay them what the services are worth and since we live in a remote world where I would never actually find myself in a bar with either of these wonderful people I can’t very well pick up the tab as a thank you like I would for a local friend.

Sorry if I overstepped a line. I just like to do nice things for people who do nice things. Paying it forward and all that rot. :slight_smile:

1 Like
17

No worries, I just wanted a message out there so others didn’t think it was a way to make money :slight_smile:

1 Like
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.