The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Need some quick help
Durfsurn
post Oct 19 2013, 06:57 AM
Post #1





Group: Members
Posts: 9
Joined: 19-October 13
Member No.: 19,871
Hi guys (first post here)

I am writing a HTML script on the Netbeans IDE 7.4 and I need some help. All I'd like to do is make a line of javascript that says

"if leftclick=true then make imageA appear at 0x0 and Image B at 256x256"

or something along those lines. Basically so when someone left clicks in a box from 0x0 to 256x256 px an image appears where they clicked.

Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 19 2013, 11:10 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(Durfsurn @ Oct 19 2013, 01:57 PM) *

Hi guys (first post here)

Hi, maybe you can use this:

CODE
<style type="text/css" media="screen">
#box {
border: solid;
height: 256px;
width: 256px;
}
</style>

<script type="text/javascript">
function pic(event)
{
    var img=document.createElement('img');
    img.src='small.gif';
    img.style.position='absolute';
    img.style.top=event.clientY+'px';
    img.style.left=event.clientX+'px';
    document.getElementById('box').appendChild(img);
}
</script>

<div id="box" onclick="pic(event)"></div>

Note that the DIV or any of its parents must not be positioned with CSS (neither fixed, relative or absolute) or the image will appear in the wrong place.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Durfsurn
post Oct 19 2013, 07:37 PM
Post #3





Group: Members
Posts: 9
Joined: 19-October 13
Member No.: 19,871
I'll try that thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Durfsurn
post Oct 19 2013, 08:02 PM
Post #4





Group: Members
Posts: 9
Joined: 19-October 13
Member No.: 19,871
CODE

<html>
    <head>
        <title>Co-Op City Tile Selection Application</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width">
    </head>

    <body>
        <img src="Yakutat Bay city overlay.jpg" width="3841" height="4865" alt="Yakutat Bay City Overlay"/>
            <style type="text/css" media="screen">
            #box {
            border: solid;
            height: 256px;
            width: 256px;
            }
            </style>

            <script type="text/javascript">
            function pic(e)
            {
                var img=document.createElement('img');
                img.src='Untitled-2';
                img.style.position='absolute';
                img.style.top=e.clientY+'0';
                img.style.left=e.clientX+'0';
                document.getElementById('box').appendChild(img);
            }
             </script>
             <div id="box" onclick="pic(e)"> </div>
            
    </body>  


What am I doing wrong here. I want it so when I click in area 0x0 to 256x256 that pic=Untitled-2 comes up in that 0x0 to 256x256 space OVERLAPPING the original image.

Thanks again-
Durfsurn
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Durfsurn
post Oct 20 2013, 01:45 AM
Post #5





Group: Members
Posts: 9
Joined: 19-October 13
Member No.: 19,871
CODE

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Co-Op City Tile Selection Application</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width">
    </head>

    <body>
        <img src="Yakutat Bay city overlay.jpg" width="3841" height="4865" alt="Yakutat Bay City Overlay"/>
        <script>
        #box=
        top="0"
        left="0"
        width="256"
        {        
        height="256"
        if onmouseup===true inside #box;
        then call <img src="Untitled-2" width="256" height="256" top="0" left="0" alt="Untitled-2"/>        
        then call <img src="Untitled-1" width="256" height="256" top="0" left="256"
        then call <img src="Untitled-1" width="256" height="256" top="256" left="256"
        then call <img src="Untitled-1" width="256" height="256" top="256" left="0"
    }
        </script>
            
    </body>  



</html>



Can someone help? The stuff under <script> *snip* </script> is what I want to happen but I don't know the full syntax on how to do it. Do I need to use an event? If so how? Thanks and the people who help me will get recognition when I finish this. smile.gif

Thanks again -

A Java Script n00b Durfsurn rolleyes.gif

This post has been edited by Durfsurn: Oct 20 2013, 01:46 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 20 2013, 06:28 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(Durfsurn @ Oct 20 2013, 03:02 AM) *

I want it so when I click in area 0x0 to 256x256 that pic=Untitled-2 comes up in that 0x0 to 256x256 space OVERLAPPING the original image.

Oh, then I completely misunderstood you question. Do you mean something like this?

CODE
<img src="pic1.gif" width="256" height="256" alt="" onclick="this.src='pic2.gif';">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Durfsurn
post Oct 20 2013, 11:43 PM
Post #7





Group: Members
Posts: 9
Joined: 19-October 13
Member No.: 19,871
Yeah that looks right. Thanks and Ill get back to you if I need more help wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Durfsurn
post Oct 21 2013, 12:36 AM
Post #8





Group: Members
Posts: 9
Joined: 19-October 13
Member No.: 19,871
Christian J,

How do I make it loop one more image? So if you click it a third time a new image comes up? Thanks wink.gif

A javascript n00b - Durfsurn
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 21 2013, 06:05 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
Did you really mean the third click and not the second? Should there be more images for each click (how many)?

It seems what you're asking about keeps changing for each new post. Please be more specific about what you want to do...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Durfsurn
post Oct 21 2013, 06:12 AM
Post #10





Group: Members
Posts: 9
Joined: 19-October 13
Member No.: 19,871
Right sorry. When you click on the image the first time a new image comes up and then if you click it again yet another image comes up overtop the previous two.

Thanks a bunch -
Your javascript n00b Durfsurn wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Durfsurn
post Oct 26 2013, 05:11 AM
Post #11





Group: Members
Posts: 9
Joined: 19-October 13
Member No.: 19,871
It's been 5 days with no response and I thought I might just bump this thread smile.gif

Thanks again -
Javascript n00b Durfsurn

EDIT:

So this is my working script:

CODE

<!DOCTYPE html>
<html>
<head>
<title>Co-Op City Tile Selection Application</title>
        <meta charset="windows-1252"/>
        <meta name="viewport" content="width=device-width"/>
<script>
var counter = 0;
function myFunction()
{
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        if(counter == 0)
        {
                var img=document.getElementById("img1");
                ctx.drawImage(img,0,0,256,256);
        }
        else if(counter ==1)
        {
                var img=document.getElementById("img2");
                ctx.drawImage(img,0,0,256,256);
        }
        else if(counter ==2)
        {
                                var img=document.getElementById("img3");
                ctx.drawImage(img,0,0,256,256);
                counter = -1;
        }

        counter = counter +1;
}
</script>
</head>

<body>
<canvas id="myCanvas" onclick="myFunction();" width="256" height="256"
style="border:1px solid #000000;">
</canvas>
                <img id="img1" style="display:none;" src="Yakutat-Bay-city-overlay_01.jpg" width="256" height="256" alt="Yakutat-Bay-city-overlay_01.jpg" />
                <img id="img2" style="display:none;" src="Yakutat-Bay-city-overlay_01X.jpg" width="256" height="256" alt="Yakutat-Bay-city-overlay_01X.jpg" />
                <img id="img3" style="display:none;" src="Yakutat-Bay-city-overlay_01Y.jpg" width="256" height="256" alt="Yakutat-Bay-city-overlay_01Y.jpg" />
</body>
</html>


Now I need it to write a cookie about keeping the state of the script. Any idea how to do that? I'm hosting it on dropbox and what I would like it to do is when I close it or someone else closes it the script remembers the picture it showed and opens it for the next person.

This post has been edited by Durfsurn: Oct 26 2013, 05:39 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 26 2013, 07:32 AM
Post #12


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
Sorry I'm not familiar with the CANVAS element.

But if you want to remember the picture for different users you can't use cookies, you need a server-side script (e.g. PHP) to check the currently used picture URL each time someone requests the page. When someone changes picture you also need to change picture URL some way on the server. You could store that value in several ways, like a text file, a database row or by copying one of different image files to the "current picture" URL used by the web page. All this is best done with an ordinary form, but can also be done with Ajax.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Durfsurn
post Oct 26 2013, 05:28 PM
Post #13





Group: Members
Posts: 9
Joined: 19-October 13
Member No.: 19,871
Ok I'll look into using some PHP code

Thanks-
Javascript n00b Durfsurn
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 02:10 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC