Onmouseover - need to set position of new image - javascript

This is driving me crazy. Here is the code I am using - with my website names as xxxxx due to sensitive nature of site. I need to set a position for the image that comes up when you hover over. Something like this - position:absolute; TOP:200px; LEFT:340px; WIDTH:500px; HEIGHT:200px. The image I am hovering over should remain static.
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http:xxxx/LgThumbxxx.png";
staticImage1 = new Image();
staticImage1.src = "http:xxx/smThumbxxx.png";
loadImage2 = new Image();
loadImage2.src = "http:xxxx/LgThumbxxxxx.png";
staticImage2 = new Image();
staticImage2.src = "http:xxx/smThumb_xxxxxx.png";
loadImage3 = new Image();
loadImage3.src = "http:xx/LgThumb_xxx.png";
staticImage3 = new Image();
staticImage3.src = "http:xxxx/smThumb_xxxx.png";
// End -->
</script>
</head>
<body>
<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http:xxx/Thumbxxx.png" border=0></span>
<span onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="http:xxxxx/Thumbxxxx.png" border=0></span>
<span onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="http://xxxx/Thumb_xxxxx.png" border=0></span>
</body>

Related

Changing source of img in js and get 0 for width?

I am currently trying to set the source of an image HTML tag using jquery and then get the height and the width of the image. However, when trying to do so with the following code, the width I get is 0 and same with height :
$(document).ready(function() {
$("#image").attr("src", "https://via.placeholder.com/600x160.png?text=Testing Image");
console.log($("#image").width());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<img id="image" />
</div>
I am trying to do this in order to change the image src of the same HTML tag and get the new width and height.
I found that it was due to the image not loaded in the DOM so I tried some things I found on internet as the two following snippets but with the same result of a width of 0 and a height of 0 :
$(document).ready(function() {
$(`<img id='image' src='${"https://via.placeholder.com/600x160.png?text=Testing Image"}'>`).appendTo('#container');
console.log($("#image").width());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>
$(document).ready(function() {
let image = new Image();
image.src = "https://via.placeholder.com/600x160.png?text=Testing Image";
image.id = "image";
$('#container').append(image);
console.log($("#image").width());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>
I do not know if you can understand my needs, but I would really appreciate help there.
Thanks in advance.
You should use a load event, in order to wait until the image is loaded and has been shown up
see below snippet :
using Jquery :
$(document).ready(function() {
var $image = $("#image");
$image.attr("src", "https://via.placeholder.com/600x160.png?text=Testing Image");
$image.on("load", function() {
console.log($(this).width(),"X",$(this).height());
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<img id="image" />
</div>
using pure js :
let image = new Image();
image.src = "https://via.placeholder.com/600x160.png?text=Testing Image";
image.id = "image";
image.addEventListener("load", function(event) {
console.log(this.width ,"x",this.height)
});
let container = document.getElementById("container")
container.appendChild(image);
<div id="container" ></div>
You need to listen image's onload event listener:
const img = new Image();
img.setAttribute('src', 'https://via.placeholder.com/150');
console.log('img width before load', img.width);
img.addEventListener('load', () => console.log('img width after load', img.width));
document.body.appendChild(img);

half responsive website not work

I've tried to build a website that will be half responsive means header+2 logos will not change as the window change its size but be fully sized.
And the 6 pictures will change their height+width as long as window.resize to fit the new window size.
I've tried this code but:
the header+2 logos are responsive too and i want them to be fully sized(as maximum browser width) all time.
the height and width are not compatible to the screen and its too big.
thanks for your advice how to fix.
CODE
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="first()">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).resize(changeImagesSize);
function first()
{
calc();
changeImagesSize()
}
function calc()
{
window.img11 = new Image();
window.img12 = new Image();
window.img13 = new Image();
window.img14 = new Image();
window.img15 = new Image();
window.img16 = new Image();
img11.src="1.jpg";
img12.src="2.jpg";
img13.src="3.jpg";
img14.src="4.jpg";
img15.src="5.jpg";
img16.src="6.jpg";
}
function changeImagesSize()
{
var img = document.getElementById('header1');
var heightheader = img.clientHeight;
var heightavailable=$('body').innerHeight()-heightheader;
var widthavailable=$('body').innerWidth();
var x=($(window).width()/screen.width);
var img1width=widthavailable*(img11.width/(img11.width+img12.width+img13.width+20));
var img2width=widthavailable*(img12.width/(img11.width+img12.width+img13.width+20));
var img3width=widthavailable-img2width-img1width-20;
var img1h=heightavailable*(img11.height/(img11.height+img14.height+heightheader+20));
var img2h=heightavailable*(img12.height/(img12.height+img15.height+heightheader+20));
var img3h=heightavailable*(img13.height/(img13.height+img16.height+heightheader+20));
$('#img1').width(img1width);
$('#img2').width(img2width);
$('#img3').width(img3width);
$('#img1').height(img1h);
$('#img2').height(img2h);
$('#img3').height(img3h);
var img4width=widthavailable*(img14.width/(img14.width+img15.width+img16.width+20));
var img5width=widthavailable*(img15.width/(img14.width+img15.width+img16.width+20));
var img6width=widthavailable-img5width-img4width-20;
var img4h=heightavailable*(img14.height/(img14.height+img11.height+heightheader+20));
var img5h=heightavailable*(img15.height/(img15.height+img12.height+heightheader+20));
var img6h=heightavailable*(img16.height/(img16.height+img13.height+heightheader+20));
$('#img4').width(img4width);
$('#img5').width(img5width);
$('#img6').width(img6width);
$('#img4').height(img4h);
$('#img5').height(img5h);
$('#img6').height(img6h);
}
</script>
<div id="header" style="position:relative;" >
<img id='header1' src="header.png" style="position:absolute; width:100%;"/>
<img id="logo1" src="logo1.png" style="position:absolute;left:30px;"/>
<img id="logo2" src="logo2.png" style="position:absolute; right:30px;"/>
</div>
<img id='img1' src="1.jpg"/>
<img id='img2' src="2.jpg"/>
<img id='img3' src="3.jpg"/>
<img id='img4' src="4.jpg"/>
<img id='img5' src="5.jpg"/>
<img id='img6' src="6.jpg"/>
<style>
body{overflow:hidden;}
img{height:auto;}
</style>
</body>
</html>
The arrangement should be
header with 2 logos pictures(not move) be fully all time
1 2 3 (one line)
4 5 6 (second line)
(the pictures)
should move and fit to window.
thanks a lot for help
you are trying to build a responsive website in completely wrong direction. You should use media queries and define width of your required width in percentages. in css you can define size of the logos in percentage which will change according to screen. if you want to learn how to build a good responsive site please comment if you have more question.

How to create a div , link and img to another IMG in Javascript

I have this picture:
<img src="cards.png" id="img"> <!--CARD PICTURE-->
This is what I need:
<div class="container_img">
<img src="cards.png" id="img"> <!--CARD PICTURE-->
<div class="share_container">
<a href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" target="_blank">
<img src="http://emmanuelorozco.com/shareFacebook.png" class="shareButtonMedia">
</a>
<a href="http://twitter.com/share?u=http://google.com" target="_blank">
<img src="http://emmanuelorozco.com/shareTwitter.png" class="shareButtonMedia">
</a>
</div>
</div>
As you can see, it is the same picture, but with some divs, links and another pictures added.
What I tried is this:
var img = document.getElementById("img");
var par = img.parentNode;
var div = document.createElement("div");
var shareLinks = document.createElement("a");
par.insertBefore(div,img);
div.appendChild(img);
div.setAttribute("class","container_img");
div.appendChild(img);
And it returns me this:
<div class="container_img">
<img src="cards.png" id="img"> <!--CARD PICTURE-->
</div>
But I cant find out how to do the rest of the code. Can anyone give me a hand?
Thanks.
Here is the whole code for your requirement.
DEMO
var img = document.getElementById("img");
var par = img.parentNode;
var div = document.createElement("div");
var shareLinks = document.createElement("a");
par.insertBefore(div,img);
div.appendChild(img);
div.setAttribute("class","container_img");
div.appendChild(img);
//UPDATE img4 and img5,
// as many as image you want, you should create more elements.
// it woudl be good if we define funciton for this.
var img4 = document.createElement("img");
img4.setAttribute("src", "http://emmanuelorozco.com/shareFacebook.png");
div.appendChild(img4);
var img5 = document.createElement("img");
img5.setAttribute("src", "http://emmanuelorozco.com/shareTwitter.png");
div.appendChild(img5);
var anotherDiv = document.createElement("div");
anotherDiv.className = "share_container";
var anchor = document.createElement("a");
anchor.setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u=http://google.com");
anchor.setAttribute("target", "_blank");
var img2 = document.createElement("img");
img2.setAttribute("src", "http://emmanuelorozco.com/shareFacebook.png");
img2.setAttribute("class", "shareButtonMedia");
anchor.appendChild(img2);
anotherDiv.appendChild(anchor);
div.appendChild(anotherDiv);
var anchor2 = document.createElement("a");
anchor2.setAttribute("href", "http://twitter.com/share?u=http://google.com");
anchor2.setAttribute("target", "_blank");
var img3 = document.createElement("img");
img3.setAttribute("src", "http://emmanuelorozco.com/shareTwitter.png");
img3.setAttribute("class", "shareButtonMedia");
anchor2.appendChild(img3);
anotherDiv.appendChild(anchor2);
div.appendChild(anotherDiv);
document.getElementById('container').appendChild(div);

javascript image slider hyperlinks

I am working on a website and my client wants an image slider where each slide links to a different page on the site. I would prefer if this were to stay in Javascript as I cant seem to wrap my head around jquery. Here is my code
Javascript code in the header
`<script type="text/javascript">
<!--
var img1 = new Image()
img1.src="DowntownEventNew.jpg"
var img2 = new Image()
img2.src="Shakespeare.jpg"
var img3 = new Image()
img3.src="DowntownConcertNew.jpg"
var img4 = new Image()
img4.src="Rangerettes.jpg"
//-->
</script>
HTML 5 and Javascript in the body
<div class="content">
<div id="slide">
<div class="slide_container">
<img src="DowntownEventNew.jpg" name="slide" />
<script type="text/javascript">
<!--
var pic =1
function slides() {
if (!document.images)
return
document.images.slide.src=eval("img" +pic+".src")
if (pic < 4)
pic++
else
pic =1
setTimeout("slides()",5000)
}
slides()
//-->
</script>
</div>
</div>
Use a plugin like Nivo Slider (that way you don't really need to develop the jQuery from scratch), and then wrap the image in an anchor tag <a>:
<div id="slider">
<img src="images/thing.jpg" alt="No Link" />
<img src="images/thing2.jpg" title="Link!" />
</div>

how to reference an html image in javascript

I have a web page that is going to display a number of images on an HTML5 canvas.
I am loading the images in a hidden section in the HTML first, before using JavaScript to draw them on the canvas, in order to speed up the amount of time is takes them to load and be rendered on the canvas.
Once all of the images have been drawn to the canvas, it must be possible to drag and drop them around the canvas. The purpose being that there will be four 'description buckets' also displayed on the canvas, and the user is required to drag each image to its corresponding description bucket.
Once I have loaded the images in the HTML, I want to create a JavaScript array to store them in while they're being accessed and manipulated by the JavaScript, i.e. I want to be able to manipulate them as if they are JavaScript images, although their sources will be HTML elements, not the direct source of the image.
I'm following the tutorial at: http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/ which does exactly what I want to do, except that the images are static. With my game, I will be providing a web form which the administrator will be able to use to change the images that are displayed depending on in what context they are using the game.
This is why where that tutorial has the code:
window.onload = function() {
var sources = {
beach: "beach.png",
snake: "snake.png",
snake_glow: "snake-glow.png",
snake_black: "snake-black.png",
lion: "lion.png",
lion_glow: "lion-glow.png",
lion_black: "lion-black.png",
monkey: "monkey.png",
monkey_glow: "monkey-glow.png",
monkey_black: "monkey-black.png",
giraffe: "giraffe.png",
giraffe_glow: "giraffe-glow.png",
giraffe_black: "giraffe-black.png",
};
loadImages(sources, initStage);
};
I want to change the sources to be those of the images that I have loaded in the hidden section of the HTML:
<section hidden>
<img id="startButton" src="images/startButton.png" alt="Start Button" width="179" height="180" href="javascript:drawLevelOneElements();"/>
<img id="building" src="images/assets/building.png" alt="Asset" />
<img id="chair" src="images/assets/chair.gif" alt="Asset" />
<img id="drink" src="images/assets/drink.gif" alt="Asset" />
<img id="food" src = "images/assets/food.gif" alt="Asset"/>
<img id="fridge" src = "images/assets/fridge.png" alt="Asset"/>
<img id="land" src = "images/assets/land.jpg" alt="Asset"/>
<img id="money" src = "images/assets/money.jpg" alt="Asset"/>
<img id="oven" src = "images/assets/oven.jpg" alt="Asset"/>
<img id="table" src = "images/assets/table.gif" alt="Asset"/>
<img id="van" src = "images/assets/van.jpg" alt="Asset"/>
<img id="burger" src = "images/expenses/direct/burger.png" alt="Direct Expense"/>
<img id="chips" src = "images/expenses/direct/chips.png" alt="Direct Expense"/>
<img id="drink" src = "images/expenses/direct/drink.jpg" alt="Direct Expense"/>
<img id="franchiseFee" src = "images/expenses/direct/franchiseFee.jpg" alt="Direct Expense"/>
<img id="wages" src = "images/expenses/direct/wages.jpg" alt="Direct Expense"/>
<img id="admin" src = "images/expenses/indirect/admin.jpg" alt="Indirect Expense"/>
<img id="cleaners" src = "images/expenses/indirect/cleaners.gif" alt="Indirect Expense"/>
<img id="electricity" src = "images/expenses/indirect/electricity.gif" alt="Indirect Expense"/>
<img id="insurance" src = "images/expenses/indirect/insurance.jpg" alt="Indirect Expense"/>
<img id="manager" src = "images/expenses/indirect/manager.jpg" alt="Indirect Expense"/>
<img id="rates" src = "images/expenses/indirect/rates.jpg" alt="Indirect Expense"/>
<img id="training" src = "images/expenses/indirect/training.gif" alt="Indirect Expense"/>
<img id="water" src = "images/expenses/indirect/water.gif" alt="Indirect Expense"/>
<img id="burger" src = "images/income/burger.png" alt="Income"/>
<img id="chips" src = "images/income/chips.png" alt="Income"/>
<img id="drink" src = "images/income/drink.jpg" alt="Income"/>
<img id="creditors" src = "images/liabilities/creditors.gif" alt="Liability"/>
<img id="electricity" src = "images/liabilities/electricity.png" alt="Liability"/>
<img id="food" src = "images/liabilities/food.jpg" alt="Liability"/>
<img id="hirePurchase" src = "images/liabilities/hirePurchase.jpg" alt="Liability"/>
<img id="loan" src = "images/liabilities/loan.png" alt="Liability"/>
<img id="overdraft" src = "images/liabilities/overdraft.jpg" alt="Liability"/>
<img id="payeTax" src = "images/liabilities/payeTax.jpg" alt="Liability"/>
<img id="tax" src = "images/liabilities/tax.jpg" alt="Liability"/>
</section>
but I'm not sure how to reference the HTML images. I tried doing it in a similar way to the way you would reference the images in JavaScript directly from their sources:
window.onload = function(){
var sources = {
asset1: document.getElementById("building");
asset2: document.getElementById("chair");
}
}
but when I loaded the page in the browser, my canvas was no longer displayed.
So far I have managed to get the canvas displaying, with one image that can be dragged and dropped around the canvas using this code:
var canvasImage = new Kinetic.Image({
image: imageObj,
width: 50,
height: 50,
// puts the image in teh middle of the canvas
x: stage.getWidth() / 2 - 50 / 2,
y: stage.getHeight() / 2 - 50 / 2,
draggable: true
});
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'images/assets/building.png';
but obviously the problem with this is that if I was to provide the administrator with a form where they could change the src of the image that's drawn from 'building.png' to some other image file, I wouldn't be able to replace the line that's loading the 'building' image in the hidden section of my HTML with a line to now load the new image instead.
Does anyone know how I can reference the HTML images from within the JavaScript?
Edit 10/12/2012 # 21:00
I tried changing the code to:
var sources = {
asset1: document.getElementById("building"),
asset2: document.getElementById("chair")
}
but my canvas still wasn't displayed when viewing the page in the browser. I also tried that with a comma after the second line, but the canvas wasn't displayed.
Edit 10/12/2012 # 22:55
I now have this function:
window.onload = function(){
var sources = {
asset1: document.getElementById("building").src,
asset2: document.getElementById("chair").src,
};
loadImages(sources, drawImage);
};
and try to draw the image on the canvas with this code:
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = sources.asset1;
but for some reason, this has again stopped the canvas from displaying in the browser... The only thing I've changed since it was displaying in the browser is the line: imageObj.src = sources.asset1;
Your code
var sources = {
asset1: document.getElementById("building");
asset2: document.getElementById("chair");
}
produces a syntax error. Your property declarations should end with commas, not semicolons (as you did correctly in your first object declaration).
The reason your canvas disappeared when you tried that code is because the script interpreter halted on the syntax error.
EDIT:
If you want to recreate your first object (the one with image URL strings) using image elements from the DOM, get the src property of each element:
var sources = {
asset1: document.getElementById("building").src,
asset2: document.getElementById("chair").src
}

Categories

Resources