<div class="row">
<div class="column">
<img src="phone.png" alt="Phone" class="column1" />
<p>Walnut MagSafe Stand</p>
<p>$120</p>
</div>
<div class="column">
<img src="laptop.png" alt="Laptop" class="column2" />
<p>Walnut Laptop Riser</p>
<p>$150</p>
</div>
<div class="column">
<img src="tablet.png" alt="Tablet" class="column3" />
<p>Walnut iPad Stand</p>
<p>$80</p>
</div>
<div class="column">
<img src="pc.png" alt="PC" class="column4" />
<p>Walnut Monitor Stand</p>
<p>$100</p>
</div>
</div>
CSS
.row {
width: 100%;
margin: 50px 0 50px 0;
}
.column {
float: left;
width: 25%;
height: 434px;
}
.column p {
font-family: "Roboto", sans-serif;
font-family: "Roboto Condensed", sans-serif;
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
line-height: 21px;
font-size: 14px;
letter-spacing: 0.7px;
text-align: center;
color: #a0a0a0;
}
.column1:hover {
background: url(products/walnut-magsafe-stand-hover.jpg);
}
Hello everyone on the Internet or on the stackoverflow.
I'm new in web development and I'm cloning some websites on the internet.
Now I need to create an image than when I hover on this image should be changed.
I tried something like this(
.column1:hover {
background: url(products/walnut-magsafe-stand-hover.jpg);
}
) but it doesn't work.
So guys what do I need to do now? Can you solve this problem???
A simple static implementation.
a {
background: url("https://i.stack.imgur.com/gROnM.jpg");
background-repeat: no-repeat;
background-size: contain;
width: 200px;
display: flex;
height: 200px;;
}
a:hover {
background: url("https://i.stack.imgur.com/hMQdU.jpg");
background-repeat: no-repeat;
background-size: contain;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
</body>
</html>
As provided by Authentic Science, img src and background are not the same. When you are trying to do
.column1:hover { background: url(products/walnut-magsafe-stand-hover.jpg); }
You are only changing the background of the img not the img src tag.
If you do not want to initially set the background of the column to the first image you wish to use and then use a hover effect, you will need to use JavaScript. This can be done by changing your classes for each "column#" into ids and inserting this JavaScript code by creating a script.js in your source folder
If you wish to use this solution you will need to duplicate the code for each column and rename them accordingly. This can all be done in one file.
// Define your variables for column1 img
let col1 = document.getElementById('column1');
let col1OriginalSource = 'phone.png';
let col1NewSource = 'phone2.png';
// Event fires when mouse enters
// Changes the value to your stored change src reference above
col1.addEventListener('mouseenter', function (event) {
event.target.src = col1NewSource;
});
// Event fires when mouse leaves
// Resets the value back to the stored src reference above
col1.addEventListener('mouseleave', function (event) {
event.target.src = col1OriginalSource;
});
The reason for storing the source references as a variable is to allow for easy modification in the future. This will put each of your src references in one spot and you will only need to change that one string to update your src. You can also initially set the value of the img src using JavaScript and completely remove the inline HTML tag to make it a complete dynamic reference.
Your HTML5 / index.html file should look like this
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<title>Document</title>
</head>
<body>
<div class="row">
<div class="column">
<img src="phone.png" alt="Phone" id="column1" />
<p>Walnut MagSafe Stand</p>
<p>$120</p>
</div>
<div class="column">
<img src="laptop.png" alt="Laptop" id="column2" />
<p>Walnut Laptop Riser</p>
<p>$150</p>
</div>
<div class="column">
<img src="tablet.png" alt="Tablet" id="column3" />
<p>Walnut iPad Stand</p>
<p>$80</p>
</div>
<div class="column">
<img src="pc.png" alt="PC" id="column4" />
<p>Walnut Monitor Stand</p>
<p>$100</p>
</div>
</div>
<!-- Insert the script tag here after the DOM elements -->
<script src="script.js"></script>
</body>
</html>
You can read the documentation for both event listeners here:
For mouseenter click here
For mouseleave click here
I am trying to make a text box appear when hover over hotspot on image map.
This is what I did to make text to appear when I hover over.
<p class="ms-rteFontSize-3"><map name="FPMap0" id="FPMap0">
<area title="Click to view" href="http://google.com" shape="rect" coords="26, 106, 133, 237"/>
<area title="Click to view" href="http://yahoo.com" shape="rect" coords="322, 113, 414, 250"/>
<area title="Click to view" href="http://ask.com" shape="rect" coords="402, 35, 488, 96"/>
<area title="Click to view" href="http://naver.com" shape="rect" coords="598, 115, 682, 254"/></p>
But instead of this, I want to make colored, visible text box to appear when I hover over. Is it something CSS is required? I am not familiar with CSS, so not sure what to apply here.
So I edited my code to this
<html>
<head>
<script src="/sites/JQueryDemo/JS/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/sites/JQueryDemo/JS/jquery.SPServices-2013.01.js" type="text/javascript"></script>
<script src="//www.outsharked.com/scripts/jquery.imagemapster.js"></script>
</head>
<body>
<img id="predflow" src="http://http://www.vectortemplates.com/raster/batman-logo-big.gif"
style="width:400px;height:240px;" usemap="#predflow-map">
<map name="predflow-map">
<area shape="rect" data-name="a,all" coords="36,46,121,131" href="google.com" />
<area shape="rect" data-name="b,all" coords="113,76,198,161" href="yahoo.com" />
<area shape="rect" data-name="c,all" coords="192,50,277,135" href="ask.com" />
<area shape="rect" data-name="d,all" coords="262,60,347,145" href="naver.com" />
</map>
<div style="width:390px; height: 120px; font-size: 12px; ">
<div id="predflow-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
<div id="predflow-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
<div id="predflow-caption-text"></div>
</div>
</div>
<script type="text/javascript">
var inArea,
map = $('#predflow'),
captions = {
a: ["google"],
b: ["yahoo"],
c: ["ask"],
d: ["naver"]
},
single_opts = {
fillColor: '000000',
fillOpacity: 0,
stroke: true,
strokeColor: 'ff0000',
strokeWidth: 2
},
all_opts = {
fillColor: 'ffffff',
fillOpacity: 0.6,
stroke: true,
strokeWidth: 2,
strokeColor: 'ffffff'
},
initial_opts = {
mapKey: 'data-name',
isSelectable: false,
onMouseover: function (data) {
inArea = true;
$('#predflow-caption-header').text(captions[data.key][0]);
$('#predflow-caption-text').text(captions[data.key][1]);
$('#predflow-caption').show();
},
onMouseout: function (data) {
inArea = false;
$('#predflow-caption').hide();
}
};
opts = $.extend({}, all_opts, initial_opts, single_opts);
map.mapster('unbind')
.mapster(opts)
.bind('mouseover', function () {
if (!inArea) {
map.mapster('set_options', all_opts)
.mapster('set', true, 'all')
.mapster('set_options', single_opts);
}
}).bind('mouseout', function () {
if (!inArea) {
map.mapster('set', false, 'all');
}
});
</script>
</body>
</html>
Still image map is working fine, but nothing appears when I hover over. I added jQuery plugin to SharePoint, example from here works fine on SharePoint page.
Here is how to do what you want in straight jQuery/javascript:
Working jsFiddle here
HTML:
Instructions: Mouse over computer's monitor to see hidden DIV
<div id="imagemap">
<img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#Map" border="0" />
<map name="Map">
<area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="CUST_1" name="CUST:1" />
<area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" id="CUST_2" name="CUST:2" />
<area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" id="CUST_3" name="CUST:3" />
</map>
<p>
<div id="myDiv">This DIV hidden unless hover over the computer's monitor</div>
</p>
</div>
<!-- Yellow DIV ID numbers overlaid on top of computer components -->
<div id="num_cust1">1</div>
<div id="num_cust2">2</div>
<div id="num_cust3">3</div>
javascript/jQuery:
function hovIn() {
var areaID = $(this).attr('id');
//alert('['+areaID+']');
if (areaID == 'CUST_1') {
$('#myDiv').show();
}
}
function hovOut() {
$('#myDiv').hide();
}
$('map area').hover(hovIn, hovOut);
CSS:
#num_cust1 {
padding: 10px;
background-color:yellow;
position:absolute;
top:60px;
left:180px;
}
#num_cust2 {
padding: 10px;
background-color:yellow;
position:absolute;
top:60px;
left:40px;
}
#num_cust3 {
padding: 10px;
background-color:yellow;
position:absolute;
top:160px;
left:180px;
}
#myDiv {
display:none;
width:50%;
height:50px;
padding: 10px;
background-color:skyblue;
}
Are you open to using jQuery?
If so, have you heard of the ImageMapster plugin?
See this link for demos: http://www.outsharked.com/imagemapster/default.aspx?demos.html
Since ImageMapster is a jQuery plugin, you will need the following lines in the head tag of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//www.outsharked.com/scripts/jquery.imagemapster.js"></script>
The first line loads the jQuery library, and the next line loads the ImageMapster plugin.
After that, it's just the code to make the imagemap work.
See the demos above for what you can do.
First of all, sorry for my english I'm still learning so I will try to explain myself as best as possible.
My question is, how can I fit the iframe height at 100%? I tried different solutions but anything works. This is my code:
HTML:
<div id="header_PA">
<div id="menu_PA">
<div id="logo_PA">
<img src="_images/1.png" title="Local PA" id="logo">
</div>
<div id="sections_PA">
...
</div>
<div id="user_box">
...
</div>
</div>
<div id="sub_menu_PA"> </div>
</div>
<iframe id="iframe_PA" src="_local_pa/dashboard.php" ></iframe>
<div class="smallFooter">
...
</div>
CSS:
#header_PA{
position: fixed;
width: 100%;
height: 70px;
z-index: 999;
}
#iframe_PA{
width: 100%;
height: 100%;
margin-top: 73px;
}
.smallFooter {
background: #121212;
}
I have skipped unnecessary parts of the HTML and CSS code.
The result of that, you can see it in this picture:
Screen Capture
Apparently the width property works but the height no. Anybody knows how can I solve it?
Thanks in advance!
Try this code to set the iframe width and height,
<iframe src="_local_pa/dashboard.php" width="100%" height="200"></iframe>
You need a little bit of javascript to adjust the height of the iframe element.
this works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>auto iframe height adjust</title>
<style>
</style>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>
<iframe width="100%" id="myFrame" src="thispage.htm" scrolling="no" frameborder="0">
An iframe capable browser is
required to view this web site.
</iframe>
</body>
</html>
Original source: http://w3schools.invisionzone.com/index.php?s=59fbfe0376deb43204ffff5aaf04736f&showtopic=26417#entry145317
I made a navbar. Here's the code:
<style type="text/css">
.topbackground {
background-repeat:no-repeat;
background-position: top;
height: 150px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFFFFF;
}
.realnewsbg {
background-image: url(http://tinkatips.hol.es/nav.png);
width: 1000px;
height: 122px;
float:left;
margin-top:-130px;
margin-left:120px;
text-align:center;
}
.realnews {
background-image: url(http://deltaflow.com/themes/deltaflow/images/pixel_transparent.gif);
width: 1000px;
height: 122px;
float:left;
margin-top:-40px;
margin-left:220px;
text-align:left;
}
.tttime {
width: 156px;
height: 122px;
padding-top:-0px;
margin-top:-40px;
margin-left:850px;
text-align:center;
}
body {background-color:#b0c4de;}
</style>
<style type="text/css">
#ajaxticker1{
width: 1000px;
height: 100px;
}
#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
}
.someclass{ //class to apply to your scroller(s) if desired
}
</style>
<script src="ajaxticker.js" type="text/javascript">
/***********************************************
* Ajax Ticker script (txt file source)- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<body>
<center><div class="topbackground">
<img id="Image-Maps_3201307070909053" src="http://deltaflow.com/themes/deltaflow/images/pixel_transparent.gif" usemap="#Image-Maps_3201307070909053" border="0" width="1000" height="122" alt="" />
<map id="_Image-Maps_3201307070909053" name="Image-Maps_3201307070909053">
<area shape="rect" coords="19,6,196,66" href="http://www.google.com" alt="" title="" />
<area shape="rect" coords="232,7,409,67" href="http://www.google.com" alt="" title="" />
<area shape="rect" coords="438,5,615,65" href="http://www.twitter.com/" alt="" title="" />
<area shape="rect" coords="651,7,828,67" href="http://www.google.com" alt="Coming Soon !" title="Coming Soon !" />
<area shape="rect" coords="998,120,1000,122" href="http://www.image-maps.com/index.php?aff=mapped_users_3201307070909053" alt="Image Map" title="Image Map" />
</map><div class="realnewsbg"></div>
<div class="realnews"><script type="text/javascript">
var xmlfile="tickercontent.txt" //path to ticker txt file on your server.
//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade")
</script></div>
<div class="tttime">
<script type="text/javascript" src="http://www.24webclock.com/clock24.js"></script>
<table border="0" bgcolor="#a0a0a0" cellspacing=1 cellpadding=3 class="clock24st" style="line-height:14px; padding:0;">
<tr><td bgcolor="#FFFFFF" class="clock24std" style="font-family:arial; font-size:12px;"><img src="http://www.24webclock.com/ico.gif" width="14" height="14" border="0" alt="Kostenlose Uhr fur die Homepage" align="left" hspace="2"> <span class="clock24s" id="clock24_77176" style="color:#6393C3;">free clock for website</span></td></tr>
</table>
<script type="text/javascript">
var clock24_77176 = new clock24('77176',0,'%HH:%nn:%ss %P','en');
clock24_77176.daylight('GB'); clock24_77176.refresh();
</script></div>
</div>
</div>
<div class="header"></div></div></body>
You can find the additional files here: http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm. The thing is that because of the clock the ticker goes behind the navbar (nav.png). How could I stop this?
Use z-index to make the clock go in front, you could do this by setting the z-index of the navbar to -1:
z-index: -1;
Fixed it!
Just moved the clock div under the header one!
I'm trying to put a header on top of my pages. It works fine with IE 8. It moves slightly down and blocking my page content on the newest IE and apple safari. Can anyone show me what I need to put so that it is compatible for all search engines? I am PHP Including my header to all my pages. Below is my header code.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<div style="position: absolute; width: 1280px; height: 92px; z-index: 1; left: 1px; top: 0px" id="layer1">
<div style="position: absolute; width: 660px; height: 22px; z-index: 1; left: 238px; top: 52px" id="layer2">
<font face="Arial">|<b>
New Cost </b>| <b>
</b>|<b> <a href="http://www..net/carriers/newcarrier.php">New
Carrier</a></b> | <b>
</b>|<b> <a href="http://www..net/carriers/search.php">Carrier
Board</a></b> | </font></div>
<p>
<img border="0" src="/carriers/.png" margin= 0 auto width="100%" height="73"></div>
</body>
</html>
Assuming this is the header you're talking about...
<img border="0" src="/carriers/echoheader.png" margin= 0 auto width="100%" height="73">
...it should look something like this. I think you'll need to specify top and make its position absolute.
HTML:
<img class='header' />
CSS:
img.header {
position:absolute;
top:0;
...other styles...
}
Try to avoid "inline styling" - this is where you set the style of the element directly in the HTML.
It is good practice to split the style from the markup, since later, in a more complex page, you can find your way around more easily.