The idea of the project is to make a widget from this image, I know it's in B&W grey scale full. I have each image with the text in a separate image for example First green section of each of the sections (the blue outer ring is split into 5 images corresponding with the text)
I have made a canvas and set the images into separate divs so I can then add a hover effect which will allow me to change the image to the corresponding B&W image or a hover effect.
My issue is I cannot understand how to use an event such as onmouseover while in JS. Here is my code in full (I can use jQuery,bootstrap, anything).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PI Security Widget</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="js/jquery-1.12.0.min.js"></script>
<![endif]-->
<!--[JQuery]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!--[JQuery]-->
<!--[CSS]-->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link href="css/effects.min.css" rel="stylesheet">
<!--[END CSS]-->
<!--[Bootstrap]>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--[Bootstrap]-->
</head>
<body>
<div id="header">
<h1>test</h1>
</div>
<!--<div class="hovereffect">-->
<!--<img class="img-responsive" src="images/b2.png" alt="">-->
<!--<div class="overlay">-->
<!--</div>-->
<!--</div>-->
<div id="container">
<h1>Test chart</h1>
<canvas id="myCanvas" width="700" height="700"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
$("#canvas").mousemove(function (e) {
handleMouseMove(e);
});
</script>
<!--</div>-->
<div id="whitering">
<script>
var whitering = new Image();
whitering.onload = function() {
context.drawImage(whitering, 69, 50);
};
whitering.src = 'images/white.png';
</script>
</div>
<div id="b1">
<script>
var b1 = new Image();
b1.onload = function() {
context.drawImage(b1, 69, 50);
};
b1.src = 'images/b1.png';
</script>
</div>
<div id="b2">
<script>
var b2 = new Image();
b2.onload = function() {
context.drawImage(b2, 69, 50);
};
b2.src = 'images/b2.png';
</script>
</div>
<div id="b3">
<script>
var b3 = new Image();
b3.onload = function() {
context.drawImage(b3, 69, 50);
};
b3.src = 'images/b3.png';
</script>
</div>
<div id="b4">
<script>
var b4 = new Image();
b4.onload = function() {
context.drawImage(b4, 69, 50);
};
b4.src = 'images/bN.png';
</script>
</div>
<div id="b5">
<script>
var b5 = new Image();
b5.onload = function() {
context.drawImage(b5, 69, 50);
};
b5.src = 'images/bN.png';
</script>
</div>
<div id="greentab1">
<script>
var g1 = new Image();
g1.onload = function() {
context.drawImage(g1, 69, 50);
};
g1.src = 'images/g1.png';
</script>
</div>
<div id="greentab2">
<script>
var g2 = new Image();
g2.onload = function() {
context.drawImage(g2, 69, 50);
};
g2.src = 'images/g2.png';
</script>
</div>
<div id="greentab3">
<script>
var g3 = new Image();
g3.onload = function() {
context.drawImage(g3, 69, 50);
};
g3.src = 'images/g3.png';
</script>
</div>
<div id="greentab4">
<script>
var g4 = new Image();
g4.onload = function() {
context.drawImage(g4, 69, 50);
};
g4.src = 'images/g4.png';
</script>
</div>
<div id="greentab5">
<script>
var g5 = new Image();
g5.onload = function() {
context.drawImage(g5, 69, 50);
};
g5.src = 'images/g5.png';
</script>
</div>
<div id="greentab6">
<script>
var g6 = new Image();
g6.onload = function() {
context.drawImage(g6, 69, 50);
};
g6.src = 'images/g6.png';
</script>
</div>
<div id="yellowtab1">
<script>
var y1 = new Image();
y1.onload = function() {
context.drawImage(y1, 69, 50);
};
y1.src = 'images/y1.png';
</script>
</div>
<div class="yellowtab2">
<script>
var y2 = new Image();
y2.id="yellowtab2" ;
y2.onload = function() {
context.drawImage(y2, 69, 50);
};
y2.src = 'images/y2.png';
// function changeImage() {
// var image = document.getElementById('yellowtab2');
// if (image.src.match("y2")) {
// image.src = "images/y2.png";
// } else {
// image.src = "images/y2BW.png";
// }
// }
//
// y2.onload = function() {
// context.onmouseover(this.src = 'images/y2.png');
// };
//
// y2.onload = function() {
// context.onmouseout(this.src = 'images/y2BW.png');
// };
//
// $(document).ready(function(){
// $(".y2").hover(function() {
// $(this).attr("src","images/y2BW.png");
// }, function() {
// $(this).attr("src","images/y2.png");
// });
// });
</script>
</div>
</div>
<div id="footer">
<h1>sadasds </h1>
</div>
</body>
</html>
I understand that when you run the code the pictures won't show up, I have a zip file with all the separate pictures but I can't seem to upload it.
Any help on how to get this working would be much appreciated!
Your divs just have js in them to draw an image into the one canvas so... they don't really separate your images at all. Mouseovers on canvas I believe need to test for image bounds manually too i think.
What your trying to do seems better accomplished by using svg or even image maps since all the hoverable shapes are not square. If your graphic is an svg, you should be able to manipulate and do hovers on any part of it, if you go with old-school imagemaps you can just show separate hover png's absolutely positioned over the grey graphic, but will need your image map as a clear png positioned over all the other graphics.
SVG is the probably the best solution for irregular shapes. You can then just use css to change the color on parts of it.
Related
I am having a hard time adding another object with tickers. I am trying to get eqn2 (i.e. 3+2=some input) to move down with the response() function. You can see in the response() function that the alert "New Question" is being called onto the screen correctly. The goal here is to have m=2 (it was at 1 before) so that the drop(2) gets called moving eqn2 down. I think the issue is that the ticker doesn't go back far enough to recognize obj[m].x = Math.random()*can.width that obj[m].y = 0.5. I don't know how to get it to work here, and any help would be much appreciated.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1j" />
</div>
<div id="eqn2"> 3+2=<input type="text" id="q2j" />
</div>
<button id="myBtn" onclick="response()">New Question</button>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
function response(){
alert("New Question");
document.getElementById(`eqn${m}`).remove();
m=m+1;
stage.update();
}
const quest=[];
quest[m]= document.getElementById(`q${m}j`);
quest[m].addEventListener("keyup", function(event) {
if (event.keyCode === 13 ) {
document.getElementById("myBtn").click();
event.preventDefault();
}
});
const values = [];
values[m] = document.getElementById(`q${m}j`);
var stage = new createjs.Stage("gameCanvas");
var obj=[];
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
can = document.getElementById("gameCanvas");
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
function startGame() {
stage.addChild(obj[m]);
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(1);
function handleTick(event){
drop(m);
stage.update();
}
}
function drop(i){
obj[i].x += 1;
obj[i].y +=3;
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
</html>
This isn't really a ticker question. You have to redefine the variables you need in the response function before the ticker.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1j" />
</div>
<div id="eqn2"> 3+2=<input type="text" id="q2j" />
</div>
<div id="eqn3"> 5+2=<input type="text" id="q3j" />
</div>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
var quest=[];
quest[m]= document.getElementById(`q${m}j`);
var values = [];
var stage = new createjs.Stage("gameCanvas");
var obj=[];
can = document.getElementById("gameCanvas");
function response(){
alert("New Question");
document.getElementById(`eqn${m}`).remove();
m=m+1;
quest[m] = document.getElementById(`q${m}j`);
quest[m].addEventListener("keyup", enterFunction);
values[m] = document.getElementById(`q${m}j`);
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
stage.addChild(obj[m]);
}
function startGame() {
quest[m].addEventListener("keyup", enterFunction);
values[m] = document.getElementById(`q${m}j`);
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
stage.addChild(obj[m]);
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(2);
function handleTick(event){
drop(m);
stage.update();
}
}
function drop(i){
obj[i].x += 1;
obj[i].y +=3;
}
function enterFunction(){
if (event.keyCode === 13 ) {
document.getElementById("myBtn").click();
}
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
<button id="myBtn" onclick="response()">New Question</button>
</html>
Using this code I can't show any image that has a dot at the beginning of the file name
Someone with a solution to this problem?
<head>
<script type="text/javascript">
function CreateNewImage()
{
var img = new Image;
img.src = "../customLayout_adv/imgCont/.32.1.1.gif";
var container = document.getElementById('container');
container.appendChild(img);
}
</script>
</head>
<body>
<button onclick="CreateNewImage();">Create New Image</button>
<div id='container'></div>
</body>
In ths module i just want to make a flipbook(magazine)so im taking images in a javascript array but the images are not loading up, instead of an image ([object" htmlimageelement]="")is displaying. I don't understand what I am missing in my code.And i'm sure that directory for my images is correct.I think I am missing something in my javascript file.
Html:
<html>
<head>
<title>Flipbook</title>
<link href="jqmodule.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jqmodule.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.booklet.latest.js" type="text/javascript"></script>
</head>
<body class="body_div">
<div class="container">
<div class="main clearfix">
<div class="custom_wrapper">
<h3>Flipbook</h3>
<div id="mybook" class="booklet"></div>
</div>
</div>
</div>
</body>
</html>
JS:
var heading=['background-size','Using transform and the transform functions','Audio','CSS 1, CSS 2.1, CSS3 ...','The benefits of CSS3'];
var para = new Array();
para[0] = new Image();
para[0].src = 'images/1.jpg';
para[1] = new Image();
para[1].src = 'images/2.jpg';
para[2] = new Image();
para[2].src = 'images/3.jpg';
$(function() {
var str="";
for(var i=0;i<para.length;i++)
{
str+="<div class=\"b-page-blank\"><h1>"+heading[i]+"</h1><img src="+para[i]+"/></div>";
}
$('#mybook').html(str);
$('#mybook').booklet({ name: "Booklet" });
$(".b-counter").click(function(){
if($(this).attr('id')==2||$(this).attr('id')==4)
{
$("#mybook").booklet("next");
}
if($(this).attr('id')==3||$(this).attr('id')==5)
{
$("#mybook").booklet("prev");
}
});
});
I may try this way, cleaner and easier to debug,
var data = [
{heading:'background-size',imageSrc:'/images/1.jpg'},
{heading:'Using transform and the transform functions',imageSrc:'/images/2.jpg'},
{heading:'Audio',imageSrc:'/images/3.jpg'}
// ...
];
$(function() {
var str="";
$.each(data,function(index,row){
str+="<div class=\"b-page-blank\"><h1>"+row.heading+"</h1><img src=\""+row.imageSrc+"\" /></div>";
})
$('#mybook').html(str);
//... rest of yoru code
});
Hope it helps
I am trying to draw an image on canvas from dataurl but nothing is showing up on the canvas. For testing purpose, I have two canvases. I am drawing an image using url on first canvas (which loads correctly) and then converting it into dataurl and drawing the dataurl in second canvas which fails to draw.
Below is my code:
test html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap.min.css" rel="stylesheet">
<title>Something</title>
</head>
<body>
<div class="col-md-8" id="middle panel">
<div class="container-fluid">
<div class="row">
<canvas class="embed-responsive-item" id="docCanvas" height="800" width="1200"></canvas>
</div>
<!-- Middle Panel-Container-Row (Editor) -->
<div class="row">
<canvas class="embed-responsive-item" id="docCanvasNew" height="1000" width="1500"></canvas>
</div>
<!-- Middle Panel-Container-Row (Editor) -->
</div>
<!-- Middle Panel-Container -->
</div>
<div class="col-md-4" id="signWidget">
<p>Boot</p>
</div>
<br>
<!-- <canvas id="docCanvas" height="800" width="1200"></canvas> -->
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="easeljs-NEXT.combined.js"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<!-- <script src="signing.js"></script> -->
<script src="ease.js"></script>
</body>
test js
var canvas, stage;
var canvas_new, stage_new;
var offset;
var update = true;
var uri;
var uri_new;
$(function() {
function init() {
// create stage and point it to the canvas:
canvas = document.getElementById("docCanvas");
stage = new createjs.Stage(canvas);
canvas_new = document.getElementById("docCanvasNew");
stage_new = new createjs.Stage(canvas_new);
// enable touch interactions if supported on the current device:
createjs.Touch.enable(stage);
// enabled mouse over / out events
stage.enableMouseOver(10);
stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas
// load document image
var docImage = new Image();
docImage.src = "new_editor_filled.png";
docImage.onload = handleDocImageLoad;
}
init();
function stop() {
createjs.Ticker.removeEventListener("tick", tick);
}
function handleDocImageLoad(event) {
var image = event.target;
var bitmap;
var container = new createjs.Container();
stage.addChild(container);
bitmap = new createjs.Bitmap(image);
container.addChild(bitmap);
bitmap.x = 0 | 0;
bitmap.y = 0 | 0;
createjs.Ticker.addEventListener("tick", tick);
uri = canvas.toDataURL();
//uri_new = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '');
var docImageNew = new Image();
docImageNew.onload = handleDocImageLoadNew;
docImageNew.src = uri;
}
function handleDocImageLoadNew(event) {
var image = event.target;
var bitmap;
var container = new createjs.Container();
stage_new.addChild(container);
bitmap = new createjs.Bitmap(image);
container.addChild(bitmap);
bitmap.x = 100 | 0;
bitmap.y = 100 | 0;
stage_new.update();
//update = true;
//createjs.Ticker.addEventListener("tick", tick);
}
function tick(event) {
// this set makes it so the stage only re-renders when an event handler indicates a change has happened.
if (update) {
update = false; // only update once
stage.update(event);
}
}
});
Hey my image wont load onto the canvas. I've been at this for hours and I cant figure out what it is. I started to debug my code in google chrome and the console says canvas.width is set to null. Thats the only error I can find.
Here is my code:
function gameLoop()
{
drawBackground();
drawPlayer();
}
function drawBackground()
{
var img = new Image();
img.src = "Images/GrassTexture.png";
g.drawImage(img,0, 0, 500, 500);
}
function drawPlayer()
{
var player1 = new Image();
player1.src = "Images/Players/Mignolet.png";
g.drawImage(player1,0, 0,50 , 50);
}
setInterval(gameLoop, 1);
var canvas = document.getElementById("Canvas");
canvas.width = 500;
canvas.height = 500;
var g = canvas.getContext("2d");
html
html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<script type="text/javascript" src="Js/Js.js"></script>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
</body>
</html>
Css
#Canvas
{
border: 1px solid black;
width:500px;
height:500px;
margin-left: 300px
}
the script is being called before the html is rendered which is why you were getting the error. its always best to place scripts just before the <body> tag ends.
<html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
<script type="text/javascript" src="Js/Js.js"></script>
</body>