2

i'm making a website with Fabricjs. One div is going to be the canvas and another is going to have lots of images (hundreds). I want to be able to click on the images so that they pop up in the canvas. My question is; how do i get the src of the images when clicked on so that an img node goes into the canvas node. Should i make an array of addEventl... for each of the images?

(writing in javascript)

thanks as always :)

<!doctype html>
<html lang="en";>
<head>
    <meta charset="utf-8" />
    <title>CustomCase</title>
    <link rel="stylesheet" href="HeaderFooter.css">
    <link rel="stylesheet" href="SkapaDesign.css">
    <script src="Jquery.js"></script>
    <script src="Fabric.js"></script>
    <script src="Canvas.js"></script>
</head>
<body>  
    <div id="Wrapper">  
        <header id="Header">
            <a href="http://www.inet.se/" id="HeaderLink1">Om Oss</a>
            <a href="F%C3%A4rdigaDesigner.html" id="HeaderLink2">Välj Design</a>
            <a href="Framsida.html" id="LogoLink"><img id="Logo" src=LogotypHemsida.png></a>
            <a href="SkapaDesign.html" id="HeaderLink3">Skapa Design</a>
            <a href="http://sv.reddit.com/" id="HeaderLink4">Hjälp</a>
        </header>

        <section id="Body">
            <img id="UpperShadow" src=NeråtSkugga.png>

            <div id="LeftColumn">
                <div id="TextMode">
                </div>
                <div id="CanvasContainer">
                    <canvas id="Canvas" width="270px" height="519px"></canvas>
                </div>
                <div id="LayerMode">
                </div>

                <div id="IPhoneMode">
                </div>
            </div>

            <div id="RightColumn">
                <div id="TextureMode">
                </div>

                <div id="TextureFilter">
                </div>

                <div id="TextureView">
                    <div id="TextureViewInside">
                        <div id="images">
                            <img src="FärgadePapper.png">
                            <img src="Hajar.png">
                            <img src="Labyrint.png">
                            <img src="Martini.png">
                            <img src="FärgadePapper.png">
                            <img src="Hajar.png">
                            <img src="Labyrint.png">
                            <img src="Martini.png">
                            <img src="FärgadePapper.png">
                            <img src="Hajar.png">
                            <img src="Labyrint.png">
                            <img src="Martini.png">
                            <img src="FärgadePapper.png">
                        </div>
                    </div>
                </div>  
            </div>

            <img id="LowerShadow" src=UppåtSkugga.png>
        </section>

        <footer id="Footer">
            <div id="FooterSpace"></div>

            <div id="FooterColumnLeft">
                <a href="">Välj Design</a>
                <a href="">Skapa Design</a>
                <a href="">Om Oss</a>
                <a href="">Hjälp</a>
            </div>  

            <div id="FooterDevider">
            </div>

            <div id="FooterColumnRight">
                <div id="Facebook">
                    <img id="FacebookLogo" src=FacebookLogo.png>
                    <a href="">Gilla oss på Facebook</a>
                </div>
                <div id="Twitter">
                    <img id="TwitterLogo" src=TwitterLogo.png>
                    <a href="">Följ oss på Twitter</a>
                </div>
            </div>

            <div id="FooterSpace"></div>
            <div id="BottomColor"></div>
        </footer>   
    </div>
</body>
</html>
2
  • dont write onclick="getImageInfo(this)" for each img , #images img on click -> this would give you the attr of the image Commented Nov 12, 2013 at 19:11
  • Where is the javascript?
    – Mike Brant
    Commented Nov 12, 2013 at 19:54

3 Answers 3

3

You don't have to declare onclick for each img.

Try this: http://jsfiddle.net/cEh93/

$("#images img").click(function() {
    var getsource = $(this).attr("src");
    alert(getsource);
});
0
1

You don't need the onclick on each image, you can attach a jQuery event handler to all images and get their src attribute (this will output the image src to the console when the image is clicked):

jQuery(document).ready(function()
    jQuery("#images img").on( "click", function() {
        console.log( jQuery( this ).attr('src') );
    });
}); // ready
6
  • Do you need to draw then image onto the canvas, or do you need to use the HTML img tag somewhere else?
    – Sébastien
    Commented Nov 12, 2013 at 19:20
  • Draw into the canvas, but i think to do so i need to add the img inside the canvas and also add it in javascript, could be wrong though. Commented Nov 12, 2013 at 19:24
  • You must put the code in jQuery(document).ready: see updated answer
    – Sébastien
    Commented Nov 12, 2013 at 19:24
  • this is what i get in the console: Uncaught SyntaxError: Unexpected identifier Commented Nov 12, 2013 at 19:26
  • Check out this JSFIDDLE: jsfiddle.net/ueu9c. You get errors because the images aren't there but it does display the src
    – Sébastien
    Commented Nov 12, 2013 at 19:28
0

You can set the retrieve of SRC only attaching event for upper DIV (using JS), like that:

       <div id="images" onclick="getSelectedImageURL(event);">
                        <input type="image"   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                    </div>

To get current selected image SRC on click event...

function getSelectedImageURL(event){
    if(event.target.localName.toUpperCase() == 'IMG')
        alert(event.target.src);
}
2
  • nothing seems to happen when i click on the images, no event and nothing in the console... Commented Nov 12, 2013 at 19:28
  • You need to replace the "div id=images" block.The function itself you can test in separate file,create file: 'test.js' and add to HEAD of the document path to file <script src="test.js"></script>.You can alternatively open under DIV branches :<script type="text/javascript"> (copy paste function) </script> and reload the page just to see it works. Commented Nov 12, 2013 at 20:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.