I am looking for code to replace a specific image with one chosen from a list of potential images.
I have a list of images which I plan to have the images (or their label) clickable, and on that click I want to have one of the four images at the top of the page to change in to the clicked image. (Sorry for the run on sentence, I am really bad at explaining things.)
Let me know if I can provide any further information to clarify. Thanks in advance!
PS Here is the code I have so far:
<html>
<head>
<style type="text/css">
.row { vertical-align: top; height:auto !important; }
.list {display:none; }
.show {display: none; }
.hide:target + .show {display: inline; }
.hide:target {display: none; }
.hide:target ~ .list {display:inline; }
#media print { .hide, .show { display: none; } }
</style>
<script type="text/javascript">
function Down(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
sender.style.width=(300) + 'px';}
function Up(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
sender.style.width=(150) + 'px';}
</script>
<style>
a:link {color: #003300; font-weight: bold; font-size:18;}
a:visited {color: #003300; font-weight: bold; font-size:18;}
a:hover {color: #00FF00; font-weight: bold; font-size:18;}
a:active {color: #00CC00; font-weight: bold; font-size:18;}
table {width:99%; border: 2px solid black; background-color:white;}
td {border: 0px solid #ccc; vertical-align:center;}
img {border:2px solid #000; width:150px;}
#select1, #select2, #select3, #select4 {border:2px solid #000; width:300px;}
#name {text-align:right;}
#pic {text-align:left;}
</style>
</head>
<body>
<font size="5"><center><b>Here are the seed beads I currently have available. Click and hold an image to see a larger image.</b></center></font>
<table>
<tr>
<td>
<center><img id="select1" src="img/selectedIMG.jpg"/></center>
</td>
<td>
<center><img id="select2" src="img/selectedIMG2.jpg"/></center>
</td>
</tr>
</table><br>
<div class="Toho Seed Beads Size 15">
Toho Seed Beads Size 15 (+)
Toho Seed Beads Size 15 (-)
<div class="list">
<ul type="none">
<li>
<table>
<tr>
<td id="name">Silver Lined<br>Crystal Clear<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_SilverLinedCrystalClear.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Transparent<br>Deep Sky Blue<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_TransparentDeepSkyBlue.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Ceylon<br>Light Rose<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_CeylonLightRose.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Opaque<br>Black<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_OpaqueBlack.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
</tr>
<tr><td colspan="8"><center>(Close)</center/></td></tr>
</table>
</li>
</ul>
</div>
</div>
</body>
</html>
Perhaps this example will be helpful? I see that you've tagged the question with HTML and CSS, but the best solution will involve JavaScript as well. You can see that inside the <script> tag below.
<!DOCTYPE html>
<html>
<head>
<!-- I prefer using jQuery. If you don't use it, it makes life easier :) -->
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<!-- this is wherever your images are actually displayed... -->
<img id="changing-images" src="first_image.png">
<!-- and this is whatever triggers the action. Note the IDs on these -->
<input type="button" id="changing-button" value="Change picture">
</body>
<script>
$(document).ready(function(){
image_names = ["first_image.png", "second_image.png", "third_image.png"];
number_of_images = image_names.length;
current_index = 0;
$("#changing-button").click(function(){
// take the mod so that we cycle around the array
current_index = (current_index+1)%number_of_images;
// catch the ID of the image area; update its "src" attribute
$("#changing-images").attr("src",image_names[current_index]);
});
});
</script>
</html>
$("a").on("click", function(e){
e.preventDefault();
var newImg = $(this).attr("href");
$(".foo").attr("src", newImg);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
image 1
image 2
image 3
</p>
<p>
<img class="foo" src="http://lorempixel.com/200/200/">
</p>
Related
<!DOCTYPE html>
<html>
<style>
#media only screen and (max-width: 600px) {
p {
background-color:powderblue;
}
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
padding: 0 4px;
flex: 20%;
}
I'm not sure if this is actually doing anything
.onclick{
width: 20px;
height: 20px;
}
</style>
<body>
I want these two onclicks to be next to each other
<table style="width:100%">
<tr>
<p id="demo" onclick="myFunction1()">Click me.</p>
</tr>
</tr>
<p id="funct" onclick="myFunction2()">Click me.</p>
</tr>
</table>
This part details what the functions do
<script>
function myFunction1() {
if (document.getElementById("demo").innerHTML == "Click me."){
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
else{
document.getElementById("demo").innerHTML = "Click me.";
}
}
function myFunction2() {
if (document.getElementById("funct").innerHTML == "Click me."){
document.getElementById("funct").innerHTML = "YOU CLICKED ME!";
}
else{
document.getElementById("funct").innerHTML = "Click me.";
}
}
</script>
</body>
</html>
You see your paragraphs in the different rows because you placed them in different rows of your table.
Just change into
<table style="width:100%">
<tr>
<td>
<p id="demo" onclick="myFunction1()">Click me.</p>
</td>
<td>
<p id="funct" onclick="myFunction2()">Click me.</p>
</td>
</tr>
</table>
and they will be placed in the same row.
In HTML tables:
<tr> tag starts a new row
</tr> tag ends current row
<td> tag starts a new box in current row
</td> tag ends current box in current row
Anyway, though it's not the object of the current question, I suggest you finding a different way than tables for organizing your web page. Take a look to <div>s + CSS.
I am writing an html email using inline styles since I'll be sending it in Outlook and read that's the best way to circumvent browser reformatting. I want to center the two links below, which I put into table cells because that's the only way I could get padding to work in Outlook. I would like the 2 links to appear centered with their background and padding on the page, but I don't know how to do that using inline styling and tables. Can anyone help? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "wall cuts, train stations, New York City"
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
<table>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
First, instead of using padding on each cell, you can just specify cellpadding attribute for a table tag -
<table cellpadding="10">
The cell content is centered by default -
<table cellpadding="10">
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
</table>
UPD
To center the whole table, set margin to 0 auto -
<table style="margin: 0 auto;">
To center only either a row or a column, apply accordingly -
<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or
<td style="width: 50%; margin: 0 auto; display: table;"></td>
You add an align attribute to the td cell.
<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> Your link
</td>
Adding margin to body tag, will that work for you.
<body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">
Use text-align:center, vertical-align:middle,
table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<div id="centerme">
<table>
<tr>
<td>
Watch my film "wall cuts, train stations, New York City"
<br/>
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
</div>
</body>
</html>
Check out this html. Appears fine to me.
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body style="height:height:500px;">
<table border="0" style="width:100%; text-align:center;">
<tr>
<td >
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "wall cuts, train stations, New York City"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "red hook, rush hour"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
</td>
</tr>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
I'm having some trouble with using an iframe. So basically I was trying to create a slideshow, with one of the slides being an embedded video, so I did this by using an iframe. Well, the slideshow functions properly, and the video is resized properly, but when the image slides come up, they aren't being enlarged to the size of the iframe like the video is, and they seem to have a padding of 2 or 3px around the top/left sides. I've attached the HTML and CSS code, and took some pictures to illustrate what I'm trying to say and if anyone see's the problem, I'd really appreciate some help. Thanks so much!
CSS CODE
#imageDiv {
border: 5px solid black;
width:500px;
}
#slideshowImg {
width:500px;
height:300px;
margin:0px;
border-spacing:20px;
}
#mediaMenu table {
font-size:14px;
border:0;
margin-top:5px;
border-spacing:0;
}
table {
margin:0;
padding:0;
border-spacing:0
}
#mediaMenu td {
margin:0px;
padding:0px;
width:120px;
height:20px;
color:#CBE8E8;
}
.subMenu img {
width:100%;
height:100px;
}
.subTitle {
font-family:chalkboard, sans-serif;
background-color:#000;
font-size:12px;
}
.subTitle a {
color:#CBE8E8;
text-decoration:none;
}
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> ******* </title>
<link rel="stylesheet" type="text/css" href="" />
<script language="javascript" type="text/javascript">
slideshowImages = new Array(5);
slideshowImages[0] = new Image();
slideshowImages[0].src = 'images/tebowFinal.jpg';
slideshowImages[1] = new Image();
slideshowImages[1].src = 'images/nash.jpg';
slideshowImages[2] = new Image();
slideshowImages[2].src = 'images/kobe.jpg';
slideshowImages[3] = new Image();
slideshowImages[3].src = 'http://www.youtube.com/embed/9UlmwcEIWUw';
slideshowImages[4] = new Image();
slideshowImages[4].src = 'images/tbrown.jpg';
index=0;
function slideShow(source)
{
document.getElementById('slideshowImg').src = slideshowImages[source].src;
clearInterval(newPic);
index=source;
imageChange();
if (source=="3")
{
onclick=clearInterval(newPic);
}
}
function slideshowForward()
{
// increase the value of index by one or reset the value to 0 if all the slides have been cycled
index++;
if(index >= 5)
{
index=0;
}
// set the image name to the slide show image
document.getElementById('slideshowImg').src = slideshowImages[index].src;
}
function imageChange() {
newPic=setInterval(function(){slideshowForward() },5000);
}
</script>
<link href="slideshow.css" rel="stylesheet" type="text/css" />
</head>
<body onload="imageChange()">
<div id="imageDiv">
<table id="mediaMenu">
<tr>
<td id="imageRow" colspan="5" >
<a href="#" onclick="clearInterval(newPic)">
<iframe id="slideshowImg" src="images/tebowFinalFinal.jpg" frameborder="0" scrolling="no" ></iframe>
</a>
</td>
</tr>
<tr>
<td class="subMenu">
<a href="#" onclick="slideShow(0)">
<table>
<tr> <td class="subTitle"> Tebow Talks </td></tr>
<tr><td><img src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(1)">
<table>
<tr> <td class="subTitle">Nash attack </td></tr>
<tr><td><img src="images/nash.jpg" alt="Steve Nash"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(2)">
<table>
<tr> <td class="subTitle">Kobe Who? </td></tr>
<tr><td><img src="images/kobe.jpg" alt="Kobe Bryant"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(3)">
<table>
<tr> <td class="subTitle">Not So Giant </td></tr>
<tr><td><img src="images/giants.jpg" alt="San Francisco Giants"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(4)">
<table>
<tr> <td class="subTitle">Expensive mistake </td></tr>
<tr><td><img src="images/tbrown.jpg" alt="Terrell Brown"></img></td></tr>
</table>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Contest Coding</title>
<meta charset = 'utf-8'>
<meta name = 'description' content = 'The free programming competition for everyone'>
<meta name = 'keywords' content = 'programming competition, coding competition, programming contest, coding contest, progrramming puzzles, coding puzzles, contestcoding, contest coding, c, c#, c++, python, ruby, java, javascript, php, haskell, perl, programming, coding'>
<meta name = 'author' content = 'Lewis Cornwall'>
<style type = 'text/css'>
body {
margin: auto;
width: 960px;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
#header {
text-align: center;
}
#leaderboard {
float: left;
}
#leaderboard table {
width: 280px;
}
#puzzles {
float: right;
}
#puzzles table {
width: 640px;
}
.view_full {
line-height: 2em;
}
h1 {
font-size: 60px;
line-height: .5em;
}
table {
border-collapse: collapse;
background-color: lightgrey;
}
table, th, td {
padding: 10px;
border: 1px solid #000;
text-align: left;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id = 'header'>
<h1>CONTEST CODING</h1>
<p>The free programming competition for everyone</p>
</div>
<div id = 'leaderboard'>
<h2>Leaderboard</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href = ''>Ed Southall</a>
</td>
<td>20</td>
</tr>
<tr>
<td>
<a href = ''>Mark Bishop</a>
</td>
<td>20</td>
</tr>
<tr>
<td>
<a href = ''>Krishna Teja</a>
</td>
<td>18</td>
</tr>
</tbody>
</table>
<a href = '' class = 'view_full'>View full leaderboard »</a>
</div>
<div id = 'puzzles'>
<h2>Latest Puzzles</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Solved By</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href = ''>The Truck Driver - Click to View and Solve</a>
</td>
<td>0</td>
</tr>
<tr>
<td>
<a href = ''>The Eight Queens - Click to View and Solve</a>
</td>
<td>0</td>
</tr>
<tr>
<td>
<a href = ''>Palindromic Primes - Click to View and Solve</a>
</td>
<td>3</td>
</tr>
</tbody>
</table>
<a href = '' class = 'view_full'>View all puzzles »</a>
</div>
</body>
</html>
and I ran it on Google Chrome. I right clicked, selected 'Inspect Element', clicked on the body section (so Chrome should highlight the whole body), but it only highlighted the #header section. Why doesn't it highlight the whole page?
Because you forgot to 'clear' the floats.
<div style="clear: both;"></div>
add this on the end of the last floating div.
It because "when an element is floated it is taken out of the normal flow of the document". So I guess the browser doesn't include the floated element to the normal contents of <body> and thus they are not highlighted.
It behaves the same in Firebug in Firefox, BTW.
body {
margin: auto;
width: 960px;
height:750px;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
specify the body height. The above should solve your problem.
I have a big problem with creating a HTML footer for my dad's firm. They are using OE and Outlook 10. I've working on the code for very long, but still I have some problems. Can I use external font? How should I make it working? How about positioning it with width: X% ?
I would like it to look like this:
But it doesn't...
Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>www.k#$#$#$#$#$#$#$.com</title>
<style>
#font-face {
font-family: times_Sans_Serif;
src: url('http://a#$#$#$#$#$#$#$.pl/tem/TIMESS_.ttf');
}
p, a, span {
font-family: times_Sans_Serif;
}
a {
text-decoration:none;
}
.header {
width:100%;
height:5px;
display:block;
background-color:#6d5759;
}
.section li{
float: left;
display: inline;
list-style-type: none;
margin:0% 3%;
padding:0;
position:relative;
}
.section p{
display:block;
text-align: left;
color:#6d5759;
}
.section a{
color: #6d5759;
}
#logo {
text-decoration:none;
text-align: right;
}
.footer {
clear:both;
font-size:11px;
width:100%;
height:auto;
display:block;
background-color:#6d5759;
color:#FFF;
text-align:center;
padding: 5px;
}
.footer a{
color:#FFF;
}
</style>
</head>
<body>
<div class="main">
<div class="header"></div>
<ul class="section">
<li id="osoba">
<p>
Marcjusz K#$#$#$#$#$#$#$<br>
+48 500 000 000<br>
marcjusz#k#$#$#$#$#$#$#$.com
</p>
</li>
<li id="logo">
<img src="http://#$#$#$#$#$#$#$.pl/tem/image001.png">
</li>
</ul>
<div class="footer">
<span> K#$#$#$#$#$#$#$ Ubezpieczenia Sp.J. | 31-475 Kraków ul. STREET1 | 32-700 Bochnia ul. STREET2 | 32-800 Brzesko ul. STREET 3 | www.kr#$#$#$#$#$#$#$.com</span>
</div>
</div>
</body>
</html>
Can you help me with that? I would be very helpful!
Style sheets are NOT supported by most mail clients. Some inline styles are allowed. Positioning is generally NOT supported to prevent emails from escaping their containers - imagine an email trying to spoof a Gmail menu or something like that.
In general:
use tables for layout
use inline styles
For a good guild to what is supported, see:
http://www.campaignmonitor.com/css/
emails are weird in that you almost need to use html from 10 years ago to make it work properly. A lot of clients strip out most of the things in the head (including the actual body tag). This includes gmail, yahoo, hotmail etc. They keep only certain things. Some keep the styles, but not all.
I suggest you move your styles away from the head and inline them inside the tags using the style="" property and use tables (think back to the 90s)
so you might have something like this:
<table width="100%">
<tr>
<td id="osoba" style="">..Osoba...<td>
<td id="logo" style="">..logo..</td>
</tr>
<tr>
<td id="footer" style="">...footer...</td>
</tr>
</table>
note: I put the id's there for clarification purposes but since we stripped out your id's, they are not necessary.
I've done it! It looks as I wanted. ;) It was kind of mental pain for me to make layout using tables, but it works! ;P Thanks for help!
Here is the code for anybody who has similar problems:
<html>
<head>
<meta charset="utf-8">
<title>www.#¤#¤#¤#¤#¤#¤#¤#¤#.com</title>
</head>
<body>
<table width="100%" align="center">
<tr>
<td colspan="4" style="width:100%; height:5px; background-color:#818285"></td>
</tr>
<tr style="color: #818285;" align="center">
<td width="20%"></td>
<td align="right" width="24%">
<div style="text-align:left; width:180px; right:0%; color:#818285;">
<a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/o-nas" target="_blank">Marcjusz K#¤#¤#¤#¤#¤#¤#¤#¤#</a><br>
+48 500 000 000<br>
<a style="color:#818285; text-decoration:none;" href="mailto:marcjusz#k#¤#¤#¤#¤#¤#¤#¤#¤#.com">marcjusz#k#¤#¤#¤#¤#¤#¤#¤#¤#.com</a>
</div>
</td>
<td align="center" width="4%" style="font-size:2em; color:#818285;"></td>
<td align="left" width="52%">
<a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/" target="_blank"><img src="http://#¤#¤#¤#¤#¤#¤#¤#¤#.pl/tem/logo-poziom300.jpg"></a>
</td>
</tr>
<tr><td colspan="4" style="font-size:11px; background-color:#818285; color:#FFF; text-align:center; padding: 5px; ">
<span> K#$#$#$#$#$#$#$# Ubezpieczenia Sp.J. | 31-475 Kraków ul. STREET 6a | 32-700 Bochnia ul. STREET 14 | 32-800 Brzesko ul. STREET 3 | <a style="color:#FFF; text-decoration:none;" href="http://k#$#$#$#$#$#$#$#$#.com/" target="_blank">www.k#$#$#$#$#$#$#$#.com</a></span>
</td></tr>
</table>
</body>
</html>