I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.
[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]
Please help? Thanks! (FYI, I'm a novice coder.)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
I guess its helpful .
But i use Jquery
just need call this code in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>
Related
whenever i am attaching a image in HTML5 the image size is getting so large.I gave the height and width also but it is not changing
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body> style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic>></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" alt="My Favoutite Pic">
</div>
</body>
</html>
Firstly, there is a redundant < in your body tag.
Then, you can use width and height attributes as below in the img tag to specify the image size
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style="width:250px;">
<h1>Favorite
<Pic>
</h1>
<p> This is one of the favourite pics.</p>
<img src="https://via.placeholder.com/150" alt="My Favoutite Pic" width="100" height="100">
</div>
</body>
</html>
Use the height and width image attributes, like this:
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite Pic</h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" width="150" height="150" alt="My Favoutite Pic">
</div>
</body>
</html>
Make sure to maintain the ratio of the length and width of the image, to keep the image looking good.
You are missing height and width tags on the img tag. The size of the div wont affect it. It might help if you set it to something like this
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0; background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" height="500" width="500" alt="My Favoutite Pic" >
</div>
</body>
</html>
The width and height are just an example, pick the one that is right for your image.
You had an extra ">" in your body tag. Your code should be as follows:
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic>></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" alt="My Favoutite Pic">
</div>
</body>
</html>
How can I return back to the base page by clicking on an image?
Picture1 will be displayed after clicking First.
How can I return back to the selection page? (To continue with my selections).
<h3>First</h3>
<h3>Secong</h3>
Instead of linking to the image file, link to a new HTML file, and place the image on that file using an <img> tag. On that same HTML file, you can include a link back to the original page using a <a> tag.
homepage.html
Go to first image.
Go to second image.
first-image.html
Back to Homepage
<img src="picture1.jpg" alt="a photograph of a kitten">
second-image.html
Back to Homepage
<img src="picture2.jpg" alt="a photograph of a puppy">
Here is result oriented approach to your question by zooming image to full page and closes on click. I think this is what you need:
$(document).ready(function(){
$('img[data-enlargable]').addClass('img-enlargable').click(function(){
$("#main").hide();
var src = $(this).attr('src');
$('<div>').css({
background: 'RGBA(0,0,0,.5) url('+src+') no-repeat center',
backgroundSize: 'contain',
width:'100%', height:'100%',
position:'fixed',
zIndex:'10000',
top:'0', left:'0',
cursor: 'zoom-out'
}).click(function(){
$(this).remove();
$("#main").show();
}).appendTo('body');
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div>
<h1>First Image</h1><br>
<img data-enlargable width="100" style="cursor: zoom-in" src="https://i.imgur.com/7KpCS0Y.jpg" />
</div>
<div>
<h1>Second Image</h1><br>
<img data-enlargable width="100" style="cursor: zoom-in" src="https://media.alienwarearena.com/media/1327-l.jpg" />
</div>
</div>
</body>
</html>
I want to assign content of the src tag of image to a variable on clicking on the image through JS:
Eg-
HTML
<div id="img">
<img src="image1.jpg">
<img src="image2.jpg">
</div>
<span id="source"/>
JS
???
I want to assign the image source of the clicked image to a variable and then display the source on HTML through span. This all should happen when I click the image. And the source that is going to be assigned to variable should be of the clicked image.
How can I do it?
Thanks in advance.
try the following:
<html>
<head>
<script>
function setImage(id){
var element = document.getElementById(id).src;
document.getElementById("source").innerHTML = "<img src='" + element + "' />";
}
</script>
</head>
<body>
<div id="img">
<img id="img1" src="image1.jpg" onclick="setImage(this.id)" >
<img id="img2" src="image2.jpg" onclick="setImage(this.id)" >
</div>
<span id="source"></span>
</body>
</html>
you can try this,
<img ng-src="{{myVar}}">
I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>
<a href="#" id=BigSwatch><img src="addtocart.png" onclick="SwapLink('ekhle.html');"
onClick=display('pleasewait.png') /></a>
In this coding, I want change image and change href also.
here when user click on addtocart.png image, I want to change image to pleasewait.png and when user click on pleasewait.png image, I want to change href like "url2.html", but when i apply my coding image changed but url2.html page also redirect directly.
<a href="#" id=BigSwatch><img id="test" src="addtocart.png" onclick="SwapLink('ekhle.html');"
onClick=display('pleasewait.png') /></a>
Script
$('#BigSwatch').on({
'click': function(){
$('#test').attr('src','pleasewait.png');
$('#BigSwatch').attr('href','url2.html');
}
});
HTML
<a href="#" id=BigSwatch><img src="addtocart.png" /></a>
in JS
$("#BigSwatch").on("click","img",function(){
$(this).attr("src","pleasewait.png");// here your image path will set
$(this).closest("#BigSwatch").attr("href","ekhle.html");
});
The better way is you can put an anchor with background image. You can follow the simple process -
Keep an anchor with background image "addToCart.png" and with class "addToCart"
On click change the class to "pleasewait" which will change the background-image to "pleasewait.png"
On Click write a function to check, if it has class "addToCart" then prevent default redirection else go to "url2.html".
HTML:
CSS:
.addToCart {
background-image:url('images/addToCart.png');
display:block;
/* Define width and height */
}
.pleaseWait {
background-image:url('images/pleaseWait.png');
}
Javascript:
$('#BigSwatch').click(function(e){
if($(this).hasClass('addToCart')) {
$(this).removeClass('addToCart').addClass('pleaseWait');
e.preventDefault();
}
});
I Hope this would work fine.
You can do this with your HTML mark up only like this
<a href="#" id=BigSwatch onClick="this.href='ekhle.html'">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png"
onClick="this.src='https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png'; this.parent.href='ekhle.html'" />
</a>
Live Demo
I have used images from google. :)
try this code.
<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
if(info.src.match("pleasewait.png")){
window.location="irl.html";
}
else{
info.src="pleasewait.png";
}
}
</script>
</head>
<body>
<img src="addtocart.png" id="hr" onclick="switchHref()"
width="100" height="100"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
doc=document.getElementById("rad");
if(doc.checked==true){
info.src="pleasewait.png";
}
if(info.src.match("pleasewait.png")){
window.location="url.html";
}
}
</script>
</head>
<body>
<img src="addtocart.png" id="hr" width="100"
height="100"/>
<input type="radio" id="rad"
onChange="switchHref()" />Click
</body>
</html>