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>
Related
This is a little script randomizing what picture should it display. I can easily set this to an <img> using document.getElementById("pic").src = randPics[randNumGen], but the background tag requires me to use url(). How can I set document.body.style.background to "url(and the random image here)"? Please no JS libraries.
const randPics = ["https://i.ibb.co/6JBbMYm/pic1.jpg", "https://i.ibb.co/rHjTdfc/pic2.jpg"];
window.onload = choosePicture();
function choosePicture() {
let randNumGen = Math.floor(Math.random() * randPics.length);
console.log(randNumGen);
document.body.style.background = "randPics[randNumGen]";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script async src="index.js" type="text/javascript"></script>
</head>
<body>
<img width="500px" src="#" alt="pic" id="pic">
</body>
</html>
var url = randPics[randNumGen];
document.body.style.backgroundImage = "url('"+ url + "')";
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
Good morning all,
I found the script which can be convert to pdf
His works nice, when information have into the tag form..
(function(){
var
form = $('.form'),
cache_width = form.width(),
a4 =[ 595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click',function(){
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF(){
getCanvas().then(function(canvas){
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit:'px',
format:'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('techumber-html-to-pdf.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas(){
form.width((a4[0]*1.33333) -80).css('max-width','none');
return html2canvas(form,{
imageTimeout:2000,
removeContainer:true
});
}
}());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML to PDF - techumber</title>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
</head>
<body>
<div class="ui page grid">
<div class="wide column">
<h1 class="ui header aligned center">HTML to PDF</h1>
<div class="ui divider hidden"></div>
<div class="ui segment">
<div class="ui button aligned center teal" id="create_pdf">Create PDF</div>
<div class="ui divider"></div>
<form class="ui form">
<p class="ui paragraph">oasdojasodjasjdaisjdoasjdoij</p>
</form>
</div>
</div>
</div>
<!-- scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
How into the var in app.js code transfer to this
my script generates any articles in print format when have after following links to article ?tmpl=component&print=1
The question is How to transfer ?tmpl=component&print=1 to var instead tag form
maybe can try that?
$(document).ready(function(){
$("a").click(function(){
var link = $(this).attr("href");
});
});
or something like this?
UPD!
After the answer #Sergion Alen got this idea:
$(document).ready(function(){
$("a").click(function(){
var link = window.location.href + '?tmpl=component&print=1';
alert(link);
});
});
Displays what i need... How to write array link display here (replace class .forms for the array link) ?:
form = $('.form')
in app.js
You're in the right track then, try this:
$(document).ready(function(){
$("a").on('click', function(e){
e.preventDefault();
var link = $(this).attr("href");
document.location = link + '?tmpl=component&print=1';
});
});
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.
I am trying to add a source to an image through Javascript, and some JQuery code I found on internet, but it doesn't seem to work:
<html>
<head>
<script src = "http://www.example.com/images/">
var count=1;
var initnumber=100;
function changeImage(){
count++;
$("#HTMLPhoto").attr('src'+((initnumber+count).toString)+".jpg");
}
</script>
</head>
<body onload="changeImage()" >
<img id="HTMLPhoto"/>
<button onclick="changeImage()">Next Image</button>
</body>
I am also trying to call once again the changeImage() function with button clicks.
Edit:Managed to make it work, I changed the code a bit, if anyone wants to see:
<html>
<head>
<script>
var count=1;
function nextImage(address){
count++;
image = document.getElementById('HTMLPhoto');
image.src ="http://www.example.com/images/"+(address+count)+".jpg";
}
</script>
</head>
<body>
<img id="HTMLPhoto"/>
<button onclick="nextImage(100)">Next Image</button>
</body>
Change:
$("#HTMLPhoto").attr('src'+((initnumber+count).toString())+".jpg");
To:
$("#HTMLPhoto").attr('src', ((initnumber+count).toString())+".jpg");