So I have this code here, and I want to float it on the right side of the screen, like next to the scroll bar.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src="http://i.imgur.com/JrrRHqr.jpg";
staticImage1 = new Image();
staticImage1.src="http://i.imgur.com/Mu27x47.jpg";
// End -->
</script>
<a href="URL HERE" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">
<img name="image1" src="http://my_button_image" border=0></a>
I would like it to keep it's functionality. Also, if possible, please incorporate my question in your answer.
Thanks!
EDIT: I want it to be like this
IMAGE 1
But with my image code that chaged when you hover over it....
EDIT2: Here's the code I'm using (HTML)
<script>
<!-- Begin
loadImage1 = new Image();
loadImage1.src="http://i.imgur.com/JrrRHqr.jpg";
staticImage1 = new Image();
staticImage1.src="http://i.imgur.com/Mu27x47.jpg";
// End -->
</script>
<body>
<a href="URL HERE" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">
<img name="image1" src="http://i.imgur.com/Mu27x47.jpg" id="image1"></a>
<div class="content">
</div>
</body>
Then CSS
#image1{
position: fixed;
top:50px;
left: 0;
width: 50px;
height:50px
}
.content {
width: 200px;
margin: auto;
background-color: white;
}
Here is an image of what it's doing to my site...
IMAGE
You want it to be fixed, rather than absolute, I assume. So when you scroll your page, your image won't move. If so, try this:
https://jsfiddle.net/4959aeg2/5/
CSS:
#image1{
position: fixed;
top:50px;
left: 0;
width: 50px;
height:50px;
}
HTML:
<a href="URL HERE" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">
<img name="image1" src="http://i.imgur.com/Mu27x47.jpg" id="image1"/></a>
If you want the image to scroll with your page, just change position: fixed; to position: absolute;
Is this what you are looking for? jsfiddle.net/u9s4rh57/2/ (UPDATED)
.HTML
<img src="//i.imgur.com/JrrRHqr.jpg"
data-alt-src="//i.imgur.com/Mu27x47.jpg" class="myImage"/>
.CSS
.myImage{
position: fixed;
bottom: 0px;
right: 0px;
width:100px;
height:100px;
}
and JS for "swapping" images from this post from #Cᴏʀʏ
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function () {
$('img.myImage').hover(sourceSwap, sourceSwap);
});
If i am understanding you right you can do something like this.
https://jsfiddle.net/u6kd4vqc/9/
.myclass {
position: absolute;
right: 10px;
top: 20px;
}
(Posted on behalf of the OP).
I got it to work! Thanks Edmar Miyake and everyone! I had to edit Edmar's code a little to get it to work. Here's what I did. I removed <div class="content"> in the HTML.
Here's the finished code!
HTML
<script>
<!-- Begin
loadImage1 = new Image();
loadImage1.src="SECOND IMAGE";
staticImage1 = new Image();
staticImage1.src="FIRST IMAGE";
// End -->
</script>
<body>
<a href="http://www.allaboutgod.com/how-to-be-saved.htm" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">
<img name="image1" src="FIRST IMAGE" id="image1">
</div>
</body>
CSS
#image1{
position: absolute;
top:2500px;
left: 0;
width: 125px;
height:332px;
}
.content {
width: 100%;
margin: auto;
background-color: white;
}
Related
I have been looking for an answer on how to save a div as an image when I click save. I have looked everywhere but I cant seem to find an answer, I am using DIV and a preview button to convert the div into an image. The closest thing that i found to save as an image was http://jsfiddle.net/epistemex/kyjs655r/ this is close to what i need to save as an image, but the problem is that this is canvas and its not working with my code this is very similar to what I have my code is messy this is very similar https://jsfiddle.net/8ypxW/3/ I would like to integrate the save from the first URL to the second URL.
This is my script it is similar to the second URL
$(function() {
var element = $("#firstshirt"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
allowTaint: true,
logging: true,
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
});
var myform = document.getElementById('myform');
myform.onsubmit = function(e) { /* do some validation on event here */ };
$("#wrapper").hover(function() {
$("#boxes").css("border-color", "red");
},
function() {
$("#boxes").css("border-color", "transparent");
});
.container {
background-color: transparent;
width: 490px;
height: 500px;
border: 2px solid;
position: relative;
overflow: hidden;
/* Will stretch to specified width/height */
background-size: 490px 500px;
background-repeat: no-repeat;
}
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid red;
position: absolute;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<center>
<div id="firstshirt" class="container" style="float:left;">
<center><div id="wrapper"><div id="boxes" class="container5" style="float:center;">
<div data-bind="foreach:items" class="fix_backround">
<div class="item" data-bind="draggable:true,droppable:true">
<center>
<span id="texter" class="text" data-bind="text:$data"></span>
<input class="edit_text"/>
</center>
</div>
</div>
<a href="" download>
<span id="image" class="preview-area"></span>
</a>
</div>
</div>
</center>
<br><br><br><br>
</div>
</center>
<br/>
</center>
</div>
</div>
<center>
<div id="previewImage">
</div>
</center>
The above code is supposed to have an image but I didn't want to add it because that will need more code I want to keep it short and simple inside their is a text box and I want to save the whole div as an image on click just like the first URL
There is several same questions in SO. Saving Div Contents or Canvas as Image
How to take screenshot of a div with JavaScript?
One way of doing it is using canvas. Working solution is http://html2canvas.hertzen.com/
Here you can see some working examples of using this library
Use this library. ..
https://html2canvas.hertzen.com
Now just select the element and size.. it will take a snapshot as image..
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 300
});
I'm trying to put an .animate in a function to show more of an image when you hover over it. So far I only managed to roll down the entire div element, somehow I can't figure out how to talk to each individual image. This is what I have.
HTML:
<div class="social">
<img src="xxx" alt="xxx">
<img src="xxx" alt="xxx">
<img src="xxx" alt="xxx">
</div>
CSS:
.social{
position: fixed;
top: -91px;
right: 10%;
}
.social img{
width: 25px;
margin: 0 5px 0 0;
}
javaScript/jQuery (works if I change $('.social a img') to $('.social')):
$(document).ready(function () {
$('.social a img').hover(function ( ){
$(this).animate({top:'0px'});
});
});
I am creating a slide show in with help of Jquery as below.I am able to get the slide show .But I am not able to give the link to each slide using href
Plseae help me .
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.fade {
position: relative;
width: 650px;
height: 373px;
}
.fade img {
position: absolute;
left: 0;
top: 0;
width: 650px;
height: 373px;
}
</style>
<script>
$(function () {
$('.fade img:gt(0)').hide();
setInterval(function () {
$('.fade :first-child').fadeOut(3000)
.next('img').fadeIn(3000).end()
.appendTo('.fade');
}, 4000);
});
</script>
<div class="fade" style="width: 603px; height: 373px; z-index: 1; border-radius: 10px 10px 10px 10px; left: 295px; top: 224px; position: absolute">
<img src="images/SAM_0043.JPG" href="www.xyz.com" >
<img src="images/SAM_0047.JPG" href="www.xyz.com" >
<img src="images/SAM_0044.JPG" href="www.xyz.com" >
</div>
</body>
Try
<img src="images/SAM_0043.JPG" >
img tag has no href attribute.
wrap img tag with a tag n give href
Or with jQuery using your current code wrap a tag around img
fiddle Demo
$('div.fade img').wrap(function () {
return '';
});
embed the img tag into the anchor tag, and provide the href="" to the anchor tag. Your work is done.
href is not an img tag attribute so better to change the html to
<img src="" />
and if you dont want to change your html you can use code below to redirect to links on click on images
$(".fade img").bind('click',function(){
window.location = $(this).attr("href");
});
I'm trying to replicate an example of an jquery plugin that enlarges image from thumbnail at my desktop and the problem is , the image doesn't enlarge from the thumbnail whenever I click on it
Here is the original source of the jquery demo that enlarges image from thumbnail that i'm trying to replicate
How to enlarge image from thumbnail in jQuery?
This is his working demo http://jsbin.com/egevij/3/edit
The problem is in my HTML .Can someone please point where I'm going wrong?
This is my HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/forms.css">
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
<div id="jQ_popup_window">
<div id="jQ_popup" class="shadow radius">
<div id="jQ_popup_close"></div>
<script type = "text/javascript" src ="trouble.js"></script>
</div>
</div>
<img src="http://placehold.it/250x150/cf5" data-full="http://placehold.it/860x590/cf5" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
</body>
</html>
forms.css CSS
CSS:
/* === POPUP WINDOW === */
#jQ_popup_window{
background: rgba(0,0,0,0.6);
left: 0;
margin-left: -9000px;
position: absolute;
top: 0;
width: 100%;
z-index:999999;
}
#jQ_popup {
background: #000;
border: 1px solid #BDB9B8;
margin: 30px auto;
padding: 25px;
position: relative;
width: 600px; /* SET HERE DESIRED W .*/
}
#jQ_popup_close {
background:#fff;
cursor: pointer;
height: 28px;
width: 28px;
position: absolute;
z-index:999999;
right: 10px;
top: 10px;
-webkit-border-radius:30px;
border-radius:30px;
border:2px solid #fff;
border-color: rgba(255,255,255,0.2);
}
#jQ_popup_close:hover{
background:#f00;
}
/* #POPUP WINDOW */
jQuery:
// POPUP WINDOW:
var scrT = $(window).scrollTop();
$(window).scroll(function(){
scrT = $(window).scrollTop();
});
// GET and use WINDOW HEIGHT //
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
// POPUP WINDOW (lightbox for video and other)
// GET WINDOW SCROLLtop OFFSET
$('[data-full]').on('click', function(e){
e.preventDefault();
$('#jQ_popup').css({
top: scrT+15
}).find('img').remove();
$('#jQ_popup_window').height($.getDocHeight).fadeTo(0,0).css({
marginLeft:0
}).fadeTo(600,1);
var imgToLoad = $(this).data('full');
$('<img>', {src:imgToLoad, width:'100%'}).appendTo('#jQ_popup');
});
// close popup
$('#jQ_popup_close, #jQ_popup_window').on('click', function(){
$('#jQ_popup_window').fadeTo(600,0,function(){
$(this).hide();
});
});
$('#jQ_popup').on('click', function(ev){
ev.stopPropagation();
});
// end POPUP WINDOW
The solution to your problem is simply moving the import of the JavaScript file. It should be placed at the end after your two <img> tags.
<img src="http://placehold.it/250x150/cf5" data-full="http://placehold.it/860x590/cf5" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
<script type = "text/javascript" src ="trouble.js"></script>
It's standard practice to load your javascript files either last in the head or last in the body. Putting script tags inside of other html tags such as <div> as you have done is not normal but I've never seen it have ill effects like this before.
I'm trying to use jQuery for the first time. I have some images that are loaded via an ajax call (not jQuery related). The page is made the way that if you refresh the page, the images loaded, stay.
I found this code somewhere else:
$(document).ready(function(){
$(".svg_chart").click(function(){
var address = $(this).attr("src");
address = address.replace(\'height=80\', \'height=300\');
$("#popup").fadeIn("slow");
$("#lightbox").attr("src",address);
});
$("#lightbox").click(function(){
$("#popup").fadeOut("fast");
});
});
<div id="popup">
<div id="center">
<img id="lightbox" src="images/blank.jpg" >
</div>
</div>
</div>
The code works fine on images already loaded when the page is loaded, but not on images fetched on the fly with Ajax, although they get the same class added. I guess it is because the doc.ready function only knows about content, after the initial page has loaded.
What can I do to make jQuery know about new content being added?
Dropping jQuery for this. It's overkill and doesn't work!
<img id="svg_1" class="svg_chart" style="float: left" width="49%" ondblclick="expand_me(this.id)" alt="" />
<div id="popup">
</div>
<div id="center">
<img onclick="expand_me(true)" id="lightbox" src="images/blank.jpg" />
</div>
<script type="text/javascript"><!-- // --><![CDATA[
function expand_me(el)
{
if (el !== true)
{
link = document.getElementById(el).src;
link = link.replace(\'height=80\', \'height=300\');
document.getElementById(\'popup\').style.display = "block";
document.getElementById(\'center\').style.display = "block";
document.getElementById(\'lightbox\').src = link;
}
else
{
document.getElementById(\'popup\').style.display = "none";
document.getElementById(\'center\').style.display = "none";
}
}
// ]]></script>
The css part:
#popup
{
background:#000000;
height:100%;
width: 100%;
position:fixed;
top: 0;
left: 0;
display: none;
opacity: 0.9;
}
#center
{
height:100%;
width: 100%;
max-width: 1200px;
position:fixed;
top: 0;
margin: 6% auto;
display: none;
}
#lightbox
{
width: 100%;
cursor: pointer;
}