Final project - how to show text when image is clicked


#1

Hello,

I finished the basic courses in html/css/javascript and jquery. I'm now busy with the final project, to create a game.

On the main page I want to have 3 images which will show a text once clicked. How do I do this?

This is what I tried, but isn't working (neither with .text instead of .appendTo).

HTML div's which include my pictures:

<div class="threePictures">

<img src="man.jpg">
<img src="oldwoman.jpg">
<img src="guy.jpg">
</div>

<div class="message">

<p> test </p>

</div>

This is my Jquery:

$(document).ready(function() {
  $("img[src='man.jpg']").click(function() {
      $("<p>Hello</p>" ).appendTo(".message");

});
});

#2

Your code is correct and it works -> https://jsfiddle.net/483ezr7n/.

Post your whole code, maybe there is something wrong with your jQuery import.


#3

Thanks so much! I spend so much time trying to fix that formula, but thanks to your comment I found what is wrong now!

I switched the below lines in my HTML around:

script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
script src="main.js" type="text/javascript">


#4

You're very welcome :slight_smile:

I am really happy that you found this flaw without our help! :slight_smile:


Extra note. I am a JavaScript developer and I would like to give you a small hint related to your previous problem. It's usually a bad idea to put a <script> tag inside the <head>. What is the reason? Well, it just slows down loading of your page.

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
Best Practices for Speeding Up Your Web Site

But scripts in the head have some benefits - they look better and are easier to organize.

So there is a really nice compromise:

  • import libraries (like jQuery) in the head;
  • import your own scripts just before the </body>.

Thanks to this solution your site will be loaded faster and you will be able to get rid off $(document).ready because at the end of the body you know that the DOM elements are ready to use. And this also solves the problem of loading script before library, it just won't happen :slight_smile:


#5

Thanks! That's useful to know :), I changed it now.

I have one more question... I have made a variable to prompt for a name. When I now enter my page it loads everything, except the background picture. The background picture only loads once I filled in a name in the prompt message and clicked ok.

How can I resolve this?

I have put the background-image in the CSS under html:
'''
html {
background-image: url(forest.png);
background-size: cover;
color: white;
font-family: fantasy;
}

---and this is what i have in JS---

$("img[src='man.jpg']").click(function() {
$(".message").text("Hello " + name + ", my name is Jacob. What can I do for you?");
$(".option").text(name + ": - Did you see a little girl?");
$(".option2").text(" - Can you tell me more about the village?");

});
var name = prompt("What is your name?");


#6

I am not really sure. I would create an Image object, set the src and then wait for the onload event.

Here is the example -> https://jsfiddle.net/factoradic/h0gmuksh/.

But there is a high chance that there might a better, neater way to do so.

@albionsrefuge is there any moderator who is highly skilled in the jQuery or JavaScript events that could help us here?


#7

There are several regulars off duty for exams at the moment - I will check.


#8

Hey albionsrefuge,

Is there anyone who can help with this? I would like to learn it in the best way :slight_smile:


#9

Regarding background loading after prompt is clicked that means you Javascript file is rendering before your CSS. So move your css link before your script tag hope that works


#10

This solution has nothing to do with the problem. We are talking about background-image with url value. It means that there must be made a HTTP request to get the image. The browser will not wait for the request to end, it will move to the HTML code and to JavaScript code.

You can test this behaviour by running this simple site:

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <style>
        body {
            background-image: url('http://static.cdprojektred.com/thewitcher.com/media/wallpapers/witcher3/full/witcher3_en_wallpaper_wallpaper_10_1920x1080_1433327726.jpg');
        }
    </style>
</head>

<body>
    <script>
        alert('Image is not loaded yet.');
    </script>
</body>

</html>

@angela_2389 I gathered the opinions of my fellow students and it looks like this method -> https://jsfiddle.net/factoradic/h0gmuksh/ might be the best solution.


#11

That code makes sense indeed, just thought I did something wrong that it didn't show the background image.

Thank you for all your help (and sorry for the slow response, busy days...)!!


#12

You're very welcome :slight_smile: And there's really no need to apologize!


#13

This topic was automatically closed after 12 hours. New replies are no longer allowed.