Javascript/css Roulette wheel? - javascript

I'm looking for a sideways image roulette wheel. Kind of like this
http://image.prntscr.com/image/b178316bc4994229831f21109aa59555.png
I can't seem to find a source or example anywhere.

Basic HTML
`<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="" alt="" id="picture1"/>
<img src="" alt="" id="picture2"/>
<img src="" alt="" id="picture3"/>
<img src="" alt="" id="picture4"/>
<button type="button" name="button" onclick="spin()">click</button>
</body>
</html>`
And javascript
function spin(){
var x = Math.floor( Math.random() * 3 )
switch (x) {
case 0:
document.getElementById('picture1');
break;
case 1:
document.getElementById('picture2')
break;
case 2:
document.getElementById('picture3')
break;
case 3:
document.getElementById('picture4')
break;
}
}
The rest is up to you friend

Related

Javascript modifying img src with substring

i'm trying to 'cut' the hash of some urls in iteration, leaving only the img url (https://i.ytimg.com/vi/9Eu7SXGyvzQ/hqdefault.jpg) without the hash (?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDi79vN15idfFETvntyC9yat7FvZQ).
I got it working in this example (2 images) but in "real code" fail, as you can see they are still some issues in code I cannot figure out, maybe redundancy, not calling the src string correctly.
Need some advice.
Thanks.
function changeSourceAll() {
var images = document.querySelectorAll("#img,.style-scope,.yt-img-shadow");
for (var i = 0; i <= images.length; i++) {
var mini = images[i].src.substring(48);
var source = images[i].src = images[i].src.replace(mini, "");
}
}
changeSourceAll();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sometitle</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<img id="img" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/9Eu7SXGyvzQ/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDi79vN15idfFETvntyC9yat7FvZQ">
<img id="img" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/gCI1L0gP-vk/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLAUz6VUtsyrv5VZcfRvtnYM48ymHA">
<script src="java.js"></script>
</main>
</body>
</html>
Use a common selector to get all your img elements: for instance, you could rely on the class .yt-img-shadow.
Then use split() to divide each image src URL in two parts, separated by the symbol ?, and re-assign the "short" version of your URL to the image.
function changeSourceAll() {
const images = document.querySelectorAll(".yt-img-shadow");
for (let i = 0; i < images.length; i++) {
const mini = images[i].src.split('?')[0];
images[i].src = mini;
}
}
changeSourceAll();
<main>
<img id="img1" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/9Eu7SXGyvzQ/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDi79vN15idfFETvntyC9yat7FvZQ">
<img id="img2" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/gCI1L0gP-vk/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLAUz6VUtsyrv5VZcfRvtnYM48ymHA">
</main>

Regarding HTML5

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>

Display image legend on hover (not as tooltip) using innerHTML?

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>

Simple HTML Image Slideshow

I'm looking for a very simple and straightforward image slideshow. No extra features just a selection of images fading in and out. Potrait and Landscapes need to be shown in their full size without any scrollbars being enabled. I managed to find this one:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadeSlideShow.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
</script>
</head>
<body>
<div id="slideshow">
<img src="../images/large/nature/BokehPlant1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the last image in the slideshow -->
<img src="../images/large/nature/BokehPlant2.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/BokehPlant3.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/RusticLeaf1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the first image in the slideshow -->
</div>
</body>
However it doesn't seem to want to work though. All it does it renders the images on after another.
Apologies in advance I haven't played with HTML in a while and I don't have much experience regarding JavaScript.
Many thanks in Advance!
Harry
I don't know if this might help you
HTML
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="slideshow">
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/cave.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/fruits.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/dog.jpg" style="width:550px;height:250px" />
</div>
</div>
</body>
</html>
JS
$(document).ready(function(){
SlideShow();
});
function SlideShow() {
$('#slideshow > div:gt(0)').hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(6000)
.next()
.fadeIn(6000)
.end()
.appendTo('#slideshow');
}, 6000);
}
LINK
http://jsbin.com/duyoyuyiwu/1/edit?html,js,output

Images In Javascript

I am creating a small application where there are multiple images displayed and when user clicks on any one of the images it gets bigger and replaces the image that is in middle.
But I am not getting the clicked image.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="text/javascript">
function swapImage(this.id) {
document.write("In SwapImage");
switch (this.id) {
case img2:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
case img3:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
case img4:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
}
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="IMG1" name="IMG1" src="image1.jpg" height="100px" width="100px">
<IMG id="IMG2" name="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.id);">
<IMG id="IMG3" name="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage();">
<a href="#">
<IMG id="IMG4" name="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage();">
</a>
</BODY>
</HTML>
How about this?
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function swapImage(src) {
document.getElementById("IMG1").src = src;
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="IMG1" src="image1.jpg" height="100px" width="100px">
<IMG id="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);">
<IMG id="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage(this.src);">
<IMG id="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);">
</BODY>
</HTML>
There are some errors in your code, for example:
The document.write should not be used like this
You are doing switch/case on non existing variables (img2, img3, img4)
JavaScript is case sensitive. IMG4 does not equal img4
return is a statement. If you want to return false, you write return false;
Each statement should end with a semicolon.
HTML tag names should be written in lowercase
this.id is used incorrectly in the swapImage function (shouldn't be there at all)..
..but it is correct when used in IMG2..
..but is incorrect in IMG3 and IMG4
The img tag should not have a "name" attribute
Hope this helps.
img3 and img4 are missing the this.id reference, so the method doesn't know about the image being clicked... is that what you were asking about?
To add to Fabian's answer, in your function your parameter should be id, not this.id, and your switch statement should do the same, like so:
function swapImage(id) {
switch (id) {
// case statements
}
}
I suppose the question is: "Why does this script fail?".
There are several issues with your script:
document.write() is not supposed to be used for logging. It can easily corrupt your page.
You don't set the IMG1 variable. You probably wont something like var IMG1 = document.getElementById("IMG1"); at the start of your script.
The cases in the switch statement have to be string literals. Instead of case img3: you have to write case "img3":
Is this what you were trying to do (untested)?
<html>
<head>
<script type="text/javascript">
var swapImage = function() {
var IMG1=document.getElementById("img1");
return function(){
switch (this.id) {
case "img2":
IMG1.src = "component1/images/image2.jpg";
intImage = 2;
break;
case "img3":
IMG1.src = "component1/images/image3.jpg";
intImage = 2;
break;
case "img4":
IMG1.src = "component1/images/image4.jpg";
intImage = 2;
break;
default:
break;
}
return false;
}
};
</script>
</head>
<body>
<IMG id="img1" height="100px" width="100px" src="image1.jpg">
<IMG id="img2" height="40px" width="40px" src="image2.jpg" onclick="swapImage();">
<IMG id="img3" height="40px" width="40px" src="image3.jpg" onclick="swapImage();">
<IMG id="img4" height="40px" width="40px" src="image4.jpg" onclick="swapImage();">
</body>
</html>
Please note that is not a good way to do this.
what about this.
<style>
ul li{
float: left;
margin:10px;
list-style: none;
}
</style>
<div><img src="http://placehold.it/300x200" alt="" id="zoomImg" height="200" width="300" /></div>
<ul>
<li><img src="http://placehold.it/100x100&text=First" alt="img1" onclick="swapImage(this.src)"></li>
<li><img src="http://placehold.it/100x100&text=Second" alt="img2" onclick="swapImage(this.src)"></li>
<li><img src="http://placehold.it/100x100&text=Third" alt="img3" onclick="swapImage(this.src)"></li>
</ul>
<script type="text/javascript">
function swapImage(src){
var zoomImg = document.getElementById('zoomImg');
zoomImg.src = src;
}
</script>

Categories

Resources