how can i do this?
is it possible to have a text hyperlink and once its hovered over, that text link becomes an image?
iv seen image rollovers but haven't seen or know how to code text to image rollover yet.
i just dont know where to begin and with what programming language. javascript? php? jquery?
i started of by using the following code:
Mouseover here
<img name = "img" alt = "" border = "0" />
but what this does is it keeps the text on screen whilst the image is loaded below it. i want the text to completely get rid off by the image.
any help guys? thanks so much in advance.
You can do it using just html and a css background image:
html
Mouseover here
css
a.hover_image:hover {
background: url(/url/to/image) no-repeat center center;
text-indent: -9999em;
}
You probably need a bit more css to define the width and height of the a tag, but this is the basics.
You ca in do in a lots of ways, here is a CSS rough example, just to see the idea
try this
This will make the link change to an image only when hovered, becomes text when hovering out (only CSS)
<style>
.changeable img
{
display:none;
}
.changeable:hover span
{
display:none;
}
.changeable:hover img
{
display:inline-block;
}
</style>
<span>Hyper Text</span><img src="img.png" />
Or if you want the link to permanently change to image (with jQuery)
<style>
.changeable img
{
display:none;
}
</style>
<span>Hyper Text</span><img src="img.png" />
<script type="text/javascript">
$('.changeable').hover(function(){
$(this).children('img').show();
$(this).children('span').hide();
})
</script>
Here is a javascript way to do it
<div id="link">
Mouseover here
</div>
<div id="hoverImage" style="display:none">
<img name = "img" alt = "" border = "0" src="img.JPG" onmouseout = "document.getElementById('link').style.display='block';document.getElementById('hoverImage').style.display='none';;" />
</div>
Assuming HTML similar to the following:
Some text
The following JavaScript should work:
function textToImage(elem){
if (!elem) {
return false;
}
else {
var img = document.createElement('img');
img.src = elem.href;
elem.removeChild(elem.firstChild);
elem.appendChild(img);
}
}
JS Fiddle proof of concept.
This can also be done with jQuery:
See In Action
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<script type='text/javascript'>
$( function() {
$("#imglink").hover(
function () {
$(this).attr('small',$(this).html());
$(this).html($(this).attr('full'));
},
function () {
$(this).html($(this).attr('small'));
}
);
});
</script>
<a herf="" id='imglink' full='<img border="0" src="someImage.png" width="163" height="37"/>'>Rollover for image 'n' rollout for text</a>
</body>
</html>
Related
I have two images, what I want to happen is that when I hover on the image, the image will change to the second image, and then when I hover on the image again, the image will change to the first image.
How do I do that using JavaScript?
This is a Javascript solution. I highly suggest you look into Jquery once you understand the below. In your case you don't seems to need the onmouseout.
HTML
<img src="urImg.png" onmouseover="chgImg(this)" onmouseout="normalImg(this)">
Javascript
function chgImg(x) {
x.src = "newImg.png";
}
function normalImg(x) {
x.src = "urImg.png";
}
HTML
<div class="image_container">
<img src="foo.png" class="first"/>
<img src="bar.png" class="last"/>
</div>
jQuery
$(".image_container").hover(function(){
$(this).toggleClass("switch");
});
CSS
.image_container .last{display:none;}
.image_container.switch .last{display:block;}
.image_container.switch .first{display:none;}
You can do this!
<a href="#" id="name">
<img title="Hello" src="images/view2.jpg>
</a>
$('#name img').hover(function() {
$(this).attr('src', 'images/view1.jpg');
}, function() {
$(this).attr('src', 'images/view2.jpg');
});
For anyone who do not want to use Javascript, just HTML, CSS.
You just need create second image with position: absolute; and put it with original image into a div (with position: relative;)
After that, you can use CSS to control opacity of second image when you hover it.
Below is my sample code using TailwindCSS
<div className="relative">
<img
src="/image1.png"
className="w-[100px] h-[100px]"/>
<img
src="/image1.png"
className="w-[100px] h-[100px] absolute opacity-[0] hover:opacity-[1]"/>
</div>
On http://www.socialstudent.co.uk/stackoverflow/ I am trying to work out a way to make it so when you tap an image on mobile, it makes text appear below it and a button. Then if you tap it again it disappears.
I have tried the usual ways in JS but none seem to work. Any ideas on how I can get that to happen would be great!
An example would be this - http://jsfiddle.net/ZECTP/ but with the image being tapped on mobile.
JS off jsfiddle as was required:
$(function () {
var div = $('#showOrHideDiv');
$('#action').click(function () {
div.fadeToggle(1000);
});
});
HTML off jsfiddle as was required:
<a id="action" href="#">hide/show text</a>
<div id="showOrHideDiv" style="display: none;">hidden text</div>
It needs to be in addition to the text which is on the image, as below text and a button needs to appear.
Thanks!
I checked the source code of the site you provided and you would need to add this code to get the desired effect. I'm assuming you want to show/hide the text over each image.
var elems = $('#my_horizontal_main_stage li');
elems.find('div').hide(); // text hidden by default, or you can use css
elems.on('click', function(e){
el = $(this);
el.find('div').fadeToggle('fast');
})
Check this udpated fiddle
I think this is what you are looking for.
HTML
<figure class = "figure">
<img src = "http://icons.iconarchive.com/icons/dapino/summer-holiday/96/photo-icon.png" />
<figcaption class = "figcaption">
SOME TEXT HERE
</figcaption>
</figure>
CSS
figure {
font-size: 100%;
}
figcaption {
display: none;
}
jQuery
$(document).ready(function(){
$(".figure").click(function(){
$(".figcaption").toggle();
});
});
<html>
<head>
<style>
#container {position:relative;left:15%;}
#myImage {width:65%;height:280px;}
#text {padding-top: 50px;}
#textbox {width:65%;height:280px;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="container" onclick="changeImage()" >
<img id="myImage" src="C:\Documents and Settings\svarghe1\My Documents\Downloads\Jaguar_Xj_Saloon_4.jpgj_.jpg" alt="">
<div id="textbox">
<p style="color:white;text-align:center;margin-top:50px;"class="text">Jaguar_Xj_Saloon</p>
<script>
function changeImage() {
if (document.getElelmentById("container").innerHTML="myImage") {
container.appendChild(myImage)
} else {
container.appendChild(textbox)
}
}
</script>
</div>
</div>
</body>
</html>
Here, I am trying to create a script for Sharepoint site page to change an element in div from Image to textbox with Onclick or hover property. There might be a lot of mistakes as this is my first attempt on JS. I have also tried
<script>
function changeImage() {
var image= document.getElementById("myImage");
if (image=true) {
var element = document.getElementById("container");
var UImage = document.createElementById("myImage");
element.appendChild(UImage)
} else {
var element = document.getElementById("container");
var Utextbox = document.createElementById("textbox");
element.appendChild(UImage)
element.appendChild(Utextbox);
}
}
</script>
#container:hover #myImage{ display:none; }
I have tried the code above in CSS, instead of script. It didn't work. At the same time the code,
a:hover #box{ text-decoration: none;color:green;background-color: Turquoise;cursor:pointer }
Works really fine. Why is that? I have given class instead of id. It also didn't work. It works in ordinary HTML file. But can't get to work in Sharepoint site.
So, can you help?
Instead of appending Image and text box from the javascript, you can already write the html codes for both and do the hide/show according to your need. I think it will make things lot easier and neat.
As for the Hover property, you can attach event of hover with jquery.
You can check the following link: http://api.jquery.com/hover/
this is going to be my first question so far cause i always do a research before using forums, but i dont get this to work.
I have an Image that works as a button for a toggle animation (button.png) and i want that image to change after clicking on it for another image (button2.png), and once you click the second image it changes again to the first image, i have:
<script type="text/javascript">
$(document).ready(function() {
// when click on the tag with id="btn"
$('#btn').click(function() {
// change the state of the "#idd"
$('#idd').toggle(800, function() {
// change the button text according to the state of the "#idd"
if ($('#idd').is(':visible')) {
$('#btn').attr('images/button2.png', this.href); // Show Less.. button
} else {
$('#btn').attr('images/button.png', this.href); //Learn More.. button
}
});
});
});
</script>
and my Html:
<div id="idd" style="display:none;">
- Here my hidden content -
</div>
<!-- Button -->
<img src="images/button.png" style="cursor: pointer;" id="btn">
What im doing wrong? Please Help :(
Check the syntax for .attr. It should be something like
$('#btn').attr('src', 'your image src');
Function Reference: http://api.jquery.com/attr/
To change the value of src you use 'attr' like this:
$('#btn').attr('src', 'images/button2.png');
Here is a DEMO
HTML
<div id="idd" class='display-none'>
- Here my hidden content -
</div>
<!-- Button -->
<img src="http://placekitten.com/40/40" id="btn">
CSS
.display-none {
display:none;
}
jQuery
var btn = $('#btn');
var idd = $('#idd');
btn.click(function() {
idd.toggle(800, function() {
// change the button text according to the state of the "#idd"
if (idd.hasClass('display-none')) {
btn.attr('src', 'http://placekitten.com/50/50');
idd.removeClass('display-none');
} else {
btn.attr('src', 'http://placekitten.com/40/40');
idd.addClass('display-none');
}
});
});
take one division e.g #play-pause-button and other in this i.e #play-pause. now put ur images in the src of inner division , on the click of outer divison source of innner division will change..
here is simillar example i'm working on. hope will help you.!
$('#play-pause-button').click(function () {
// $('#play-pause-button').play();
if ($("#media-video").get(0).paused) {
$("#media-video").get(0).play();
$("#play-pause").attr('src', "Image1 path");
}
else {
$("#media-video").get(0).pause();
$("#play-pause").attr('src', "Image2 path");
}
});
You should use css to associate image(s) on your "button" and a css class to determine which to show.
You can then use Jquery's ToggleClass() to add/remove the class. You can use the same class to show/hide your hidden content.
markup
<div id="idd">
- Here my hidden content -
</div>
<div id="btn">Click Me</div>
css
#idd.off {
display:none;
}
#btn {
border:1px solid #666;
width:100px; height:100px;
background:#fff url(images/button.png) no-repeat 0 0; // Show Less.. button
}
#btn.off {
background:#fff url(images/button2.png) no-repeat 0 0; //Learn More.. button
}
jquery
$('#btn').click(function(){
$('#idd').toggleClass('off');
$('#btn').toggleClass('off');
});
I am trying to make a clipping window but it is not happening, here is the code sample:
<html>
<head>
<style>
#clippingWindow
{
height:178px;
width:278px;
overflow: hidden;
}
#bgImg
{
left:35px;
border:54px;
}
</style>
<script language="javascript">
function getImgSize()
{
var ds = document.getElementsByName('a');
var wid = ds[0].width;
var pos = (wid-278)/2;
alert(pos);
alert(ds[0].id);
if(ds[0].width>278)
{
dt.style.left=500; //this is not working
}
}
</script>
</head>
<body><input type="button" onClick="getImgSize();">
<div id="clippingWindow">
<img name="a" src="sss.bmp" id="bgImg">
</div><br><br><br>
<div id="ad">
<img name="a" src="484.jpeg">
</div>
</body>
</html>
You probably need to set the position property of the element you want to position to something like absolute or relative (e.g. ds.style.position = "relative";). The left property doesn't have any effect on statically positioned elements.
Also, you probably need to use "500px" instead of the number 500.
I see three issues:
dt.style.left=500; should be ds.style.left=500; (but see point #3)
You need to position your #bgImg element. Ex: position:relative;
Most browsers should be OK with your 500 unit in the line ds.style.left=500; however dts.style.left='500px'; would be better.
jsFiddle example
you must set the css property "left" with a value and a measurement such as "500px" (you forgot the px)