I've created a search function that shows data in my table. However I want to only show one row as a result. I was wondering if anyone knows of any code that would only show one row as a result, rather than multiple rows.
My current HTML:
<input class="search selectable" placeholder="Find any film, TV series or video game release date..." data-column="0" type="search">
<table class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Release date</th>
<th>Starring</th>
<th>Genre</th>
<th>Age rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Human Centipede 3 (Final Sequence)</td>
<td>
<ul>
<li>Wednesday 1st July</li>
</ul>
</td>
<td>
<ul>
<li>...</li>
</ul>
</td>
<td>
<ul>
<li>Action</li>
</ul>
</td>
<td>
<ul>
<li>18</li>
</ul>
</td>
</tr>
</tbody>
</table>
CSS:
html {
position: fixed;
height: fixed;
background-color: #bc3030;
min-height: fit;
}
table {
width: 663.5px;
}
form {
display: inline-block;
border-radius: 5px;
background-color: #bc3030;
background-image: -ms-linear-gradient(top, #EDE5DB 0%, #DCD0C2 80%);
background-image: -moz-linear-gradient(top, #EDE5DB 0%, #DCD0C2 80%);
background-image: -webkit-linear-gradient(top, #EDE5DB 0%, #DCD0C2 80%);
background-image: linear-gradient(top, #EDE5DB 0%, #DCD0C2 8a0%);
box-shadow: inset 0 1px #F6F2EC, 0 3px 2px #E5E5E5;
}
input {
border: 2px solid #333333;
width: 529px;
height: 50px;
padding-left: 132px;
font-family:"Raleway";
font-size: 20px;
font-weight: normal;
font-weight: bold;
font-weight: 1000;
background: #fff url(http://static.wixstatic.com/media/97c989_1b9f42901df24660a8a3200c1abb366e.png_srz_p_112_61_75_22_0.50_1.20_0.0 0_png_srz) no-repeat 0.1px;
}
td, th {
width: 550px;
border-bottom: 0px solid #bc3030;
color: #000;
padding: 5px 21px;
font-family:"raleway";
font-weight: normal;
font-weight: bold;
font-weight: 10;
font-size: 18px;
}
thead div {
color: #fff;
padding: 0xpx;
margin-left: 0px;
line-height: normal;
border-left: 0px solid #333333;
}
tbody, td {
background: #fff;
}
Javascript:
document.ontouchmove = function (event) {
event.preventDefault();
}
$('table').on('filterEnd', function () {
if (this.config.lastSearch.join('') === '') {
$(this).children('tbody').children().addClass('filtered');
}
});
$(function () {
var $table = $('table').tablesorter({
theme: '',
widgets: ["zebra", "filter"],
widgetOptions: {
filter_columnFilters: false,
filter_saveFilters: true,
filter_reset: '.reset'
}
});
$.tablesorter.filter.bindSearch($table, $('.search'));
$('select').change(function () {
$('.selectable').attr('data-column', $(this).val());
$.tablesorter.filter.bindSearch($table, $('.search'), false);
});
});
I would not recommend doing this because it is not what a user expects when they search.
If you had to do it, then use this code (demo):
$(function () {
$('table')
.tablesorter({
theme: 'blue',
widgets: ['zebra', 'filter']
})
.on('filterEnd', function(e, config ){
if ( config.lastSearch.join('') !== '' ) {
config.$table
.find('tbody tr')
.not('.filtered') // rows not hidden
.filter(':gt(0)') // target rows > first
.addClass('filtered'); // hide
}
});
});
I would also recommend adding a note, like I did in the demo, telling the user what to expect.
Related
After refresh, I wanna see a green row on clicked one. Please help me.
$('.clickway').on('click', function(){
$(this).closest("tr").css('background-color','green');
localStorage.setItem("nanaxi", true);
});
});
$(document).ready(function(){
$('.button').on('click', function(){
$(this).closest("tr").css('background-color','green');
localStorage.setItem("nanaxi", true);
});
}); ```
For the purposes of the following I needed to add some unique means of identifying each table row ( though in your fiddle there is only 1 row of data but I suspect there should be many ) because id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}" cannot be equated without the correct supporting libraries/data. So - I elected to add a dataset attribute that takes the name of the user ( presumably obtainable using {{ listing.owner_name }} ? )
I made the assumption that more than one row might be active at any one time and should be restored to such a state upon page reload. The following is all vanilla Javascript - no doubt you can convert to jQuery code if required but as I don't use it I can offer no guidance there.
The javascript has explanatory comments throughout but in essence there is an event listener bound to each table-cell within the main table body. The listener finds the table row ( n.parentNode etc ) and uses the dataset attribute in this case as a key in the json stored within localStorage.
The localStorage is read on page load and these name keys are processed to find any active table-rows.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
#main-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 5px;
font-size: 14px;
background-color:black;
}
#main-table tbody {
background-color: #18181a;
}
#main-table th, #main-table td{
padding: 4px;
}
#main-table tr:hover {
background-color: rgb(43, 43, 43);
}
#main-table th {
background-color: #18181a;
}
#main-table a {
color:#ffffff;
}
#main-table .avatar-cell {
background-size: 48px !important;
background-position: center !important;
height: 48px;
width: 48px;
padding: 1px;
cursor: pointer;
}
#main-table .item-cell {
background-size: 48px !important;
background-position: center !important;
height: 48px;
width: 48px;
padding: 1px;
}
#main-table .copy-text-button {
display: inline-block;
border-radius: 4px;
background-color: green;
border: none;
color: #FFFFFF;
text-align: center;
padding: 5px;
width: 50px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
#china {
background: url(https://lipis.github.io/flag-icon-css/flags/4x3/cn.svg);
width: 20px;
height: 15px;
background-repeat: no-repeat;
}
#main-table .copy-text-button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
#main-table .listing-row.visited {
background-color: #18181a;
color: #dadada;
}
#main-table .button {
background-color: #14cc74;
border: none;
color: black;
padding: 3px 5px;
text-align: center;
text-decoration: none;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 2px;
transition-duration: 0.1s;
font-family: 'FiraGO', sans-serif;
}
#main-table .button:hover {
background-color: #414141; /* Green */
color: white;
}
.active{
background:rgba(0,200,50,0.25)
}
th{color:white;background:rgb(80,80,80)!important;text-align:left;}
td:nth-of-type(4){color:pink}
</style>
</head>
<body>
<table id="main-table">
<tbody>
<tr>
<th>Name</th>
<th>Actions</th>
<th>Vehicle</th>
<th></th>
</tr>
<tr data-name='Mike' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
<td>
<a class="clickway" htarget="_blank">Mike</a>
</td>
<td>
<center><a target="_blank"><button class="button">CLICK</button></a></center>
</td>
<td>
Car
</td>
<td>
<center> 100</center>
</td>
</tr>
<tr data-name='Sarah' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
<td>
<a class="clickway" htarget="_blank">Sarah</a>
</td>
<td>
<center><a target="_blank"><button class="button">CLICK</button></a></center>
</td>
<td>
Hovercraft
</td>
<td>
<center> 400</center>
</td>
</tr>
<tr data-name='Sally' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
<td>
<a class="clickway" htarget="_blank">Sally</a>
</td>
<td>
<center><a target="_blank"><button class="button">CLICK</button></a></center>
</td>
<td>
Rocketship
</td>
<td>
<center> 1080</center>
</td>
</tr>
<tr data-name='Rebecca' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
<td>
<a class="clickway" htarget="_blank">Rebecca</a>
</td>
<td>
<center><a target="_blank"><button class="button">CLICK</button></a></center>
</td>
<td>
Helicopter
</td>
<td>
<center> 4500</center>
</td>
</tr>
</tbody>
</table>
<script>
document.addEventListener('DOMContentLoaded',()=>{
const _STORE='nanaxi';
/*
Find all table cells within rows with class `listing-row`
and assign an event handler to each. The `click` event will
find the parent table-row and use the dataset `name` attribute
( OR the ID perhaps if it is unique!!! ) as a KEY in the
localStorage record.
*/
document.querySelectorAll('.listing-row td').forEach( td=>{
td.addEventListener('click',function(e){
e.stopPropagation();
if( e.target==e.currentTarget ){
let tr=e.target.parentNode;
// read the localStorage or create empty Object literal.
let json=localStorage.getItem( _STORE )!=null ? JSON.parse( localStorage.getItem( _STORE ) ) : {};
// check if the name exists as a key or add if it does not
// if it does exist, toggle the value between 1 & 0
if( !json.hasOwnProperty( tr.dataset.name ) ) json[ tr.dataset.name ]=1;
else json[ tr.dataset.name ]=1-json[ tr.dataset.name ];
// save the localStorage and set the "active" class
localStorage.setItem( _STORE, JSON.stringify( json ) );
tr.classList.toggle('active');
}
})
});
/*
on page load, read the store if it exists and for every
name entry that is set as 1 mark the appropriate table
row (based upon data-name attribute or ID) as "active"
and apply the css class.
*/
let json=localStorage.getItem( _STORE );
if( json!=null ){
json=JSON.parse( json );
Object.keys( json ).forEach( name=>{
if( json[name]==1 ){
document.querySelector('tr[data-name="'+name+'"]').classList.add('active')
}
})
}
});
</script>
</body>
</html>
I’ve been playing around with transitions a bit in Vue. I’ve got a test app that gets from a db then shows in a table format with v-for to populate the table cells. transition-group though, doesn’t seem to work at all. I’ve got:
<table class="table" v-if="showTable">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<transition-group tag="tbody" enter-active-class="animated fadeInDownBig" leave-active-class="animated fadeOutRight">
<tr v-for="(value, key, index) in detailsData" v-bind:key="key">
<th scope="row">{{value.details_key}}</th>
<td>{{value.first_name}}</td>
<td>{{value.last_name}}</td>
<td><button class="btn btn-danger" #click="deleteEntry(value.details_key, key, $event)">Delete</button></td>
</tr>
</transition-group>
</table>
The classes I’m trying to use are part of Animate.css, they work fine with just tags. I’ve also tried adding a “name” tag and using my own css classes but nothing seems to work.
For first sight, IMO its not working because you are trying to animate table rows - <tr> tags. And this is not possible. Possible solution is to use the CSS display property to simulate <tr> tags but with another tag - <div> for example, but with CSS like this: div { display: table-row } Look for this post, where I show the animated table example, and how I created table without <table>, or any other table related tags.
Vue.component('data-grid', {
template: '#data-grid',
props: ['url', 'columns'],
data () {
return {
users: [],
query: '',
prevKey: 'id',
orderDesc: false
}
},
computed: {
filteredUsers () {
return _.filter(this.users, user =>
_.find(user, prop =>
new RegExp(this.query, 'i').test(prop)
)
)
}
},
methods: {
sortUsers (evt) {
var key = evt.target.dataset.key
if (this.prevKey === key) {
this.users.reverse()
this.orderDesc = !this.orderDesc
} else {
this.users = _.sortBy(this.users, key)
this.orderDesc = false
this.prevKey = key
}
},
updateQuery: _.debounce(function (evt) {
this.query = evt.target.value
}, 300),
clearQuery () {
this.query = ''
},
onCreate (elm) {
elm.style.opacity = 0
},
async onData (elm) {
this.users = await axios
.get(this.url)
.then(res => res.data)
Velocity(elm, "fadeIn", {duration: 600})
}
}
})
new Vue({
el: '#app'
})
.data-grid {
width: 98%;
margin: 10px auto;
padding: 2px;
background-color: white;
border: 2px solid #3F51B5;
overflow: hidden;
}
.table {
display: table;
width: 100%;
font-size: 13px;
font-family: Arial, sans-serif;
color: #263238;
cursor: pointer;
}
.thead {
display: table-header-group;
}
.tbody {
display: table-row-group;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
position: relative;
}
.tr .td:not(:last-child) {
border-right: 2px solid white;
}
.thead .td {
padding: 5px 14px;
background-color: #3F51B5;
color: white;
font-weight: bold;
text-align: center;
}
.tbody .td {
padding: 4px;
color: #263238;
text-align: center;
}
.tbody .tr:hover .td {
background-color: #C5CAE9;
}
.tbody .tr:hover .td:not(:last-child) {
border-right: 2px solid #C5CAE9;
}
.tools {
margin: 10px;
box-sizing: border-box;
}
.tools:after {
content: "";
display: block;
clear: both;
}
.search {
float: right;
}
.arrow {
display: inline-block;
position: absolute;
width: 0;
height: 0;
margin-left: 5px;
margin-top: 5px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
transition: all .6s;
}
.asc {
border-bottom: 6px solid white;
}
.desc {
border-top: 6px solid white;
}
.users-move {
transition: transform .6s;
}
.users-enter-active, .users-leave-active {
transition: all .6s;
}
.users-enter, .users-leave-to {
opacity: 0;
transform: translateY(30px);
}
<div id="app">
<data-grid
url="https://api.mockaroo.com/api/b5f38710?count=8&key=cdbbbcd0"
:columns="{id: 'ID', nick: 'Nick name', first: 'First name', last: 'Last name'}"
></data-grid>
</div>
<template id="data-grid">
<transition
appear
v-on:before-appear="onCreate"
v-on:appear="onData"
>
<div class="data-grid">
<div class="tools">
<div class="search">
<input
type="text"
#input="updateQuery"
:value="query"
placehorder="search..."
>
<button class="clear" #click="clearQuery">clear</button>
</div>
</div>
<div class="table">
<div class="thead" #click="sortUsers">
<div class="tr">
<span v-for="(col, key) in columns" class="td" :data-key=key>
{{ col }}
<span
v-if="prevKey === key"
:class="['arrow', orderDesc ? 'desc' : 'asc']">
</span>
</span>
</div>
</div>
<transition-group name="users" tag="div" class="tbody">
<div class="tr" v-for="row in filteredUsers" :key="row.id">
<span class="td" v-for="column in row">{{ column }}</span>
</div>
</transition-group>
</div>
</div>
</transition>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://unpkg.com/underscore#1.8.3/underscore-min.js"></script>
<script src="https://unpkg.com/vue#2.4.4/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios#0.16.2/dist/axios.min.js"></script>
I need to highlight a table row (exluding the table head), but I can not use CSS hover. I must use JavaScript onMouseOver and onMouseOut events. The JavaScript must be contained in an external file.
I am already using the external JavaScript file to print the date in the footer. For some reason onMouseOver and onMouseOut are not calling "trackTableHighlight" or "highlightTableRow". What am I doing wrong?
Here is test.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script src="test.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Test</h1>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
<div class="main">
<div class="middle-content">
<br>
<table class="stripe_table">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody onMouseOver="trackTableHighlight(event, '#8888FF')" onMouseOut="highlightTableRow(0)">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<footer>
<p>
Today is:
<script>printDate();</script>
</p>
</footer>
</div>
</div>
</body>
</html>
Here is test.js:
function printDate()
{
document.write(Date());
}
function trackTableHighlight(mEvent, highlightColor)
{
if (!mEvent)
mEvent=window.event;
// Internet Explorer
if (mEvent.srcElement)
{
highlightTableRow( mEvent.srcElement, highlightColor);
}
// Netscape and Firefox
else if (mEvent.target)
{
highlightTableRow( mEvent.target, highlightColor);
}
}
function highlightTableRow(myElement, highlightColor)
{
var i=0;
// Restore color of the previously highlighted row
for (i; i<savedStateCount; i++)
{
restoreBackgroundStyle(savedStates[i]);
}
savedStateCount=0;
while (myElement &&
((myElement.tagName && myElement.tagName!="TR") || !myElement.tagName))
{
myElement=myElement.parentNode;
}
if (!myElement || (myElement && myElement.id && myElement.id=="header") )
return;
if (myElement)
{
var tableRow=myElement;
if (tableRow)
{
savedStates[savedStateCount]=saveBackgroundStyle(tableRow);
savedStateCount++;
}
var tableCell=findNode(myElement, "TD");
var i=0;
while (tableCell)
{
if (tableCell.tagName=="TD")
{
if (!tableCell.style)
{
tableCell.style={};
}
else
{
savedStates[savedStateCount]=saveBackgroundStyle(tableCell);
savedStateCount++;
}
tableCell.style["backgroundColor"]=highlightColor;
tableCell.style.cursor='default';
i++;
}
tableCell=tableCell.nextSibling;
}
}
}
Here is test.css:
html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(to bottom, #FFFFFF, #4F6D93) no-repeat;
color: #666666;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
header {
background-color: #000033;
color: #FFFFFF;
height: 60px;
text-align: center;
padding-top: 15px;
}
nav {
font-weight: bold;
padding: 20px;
float: left;
width: 160px;
}
nav ul {
list-style-type:none;
margin: 0px;
padding-left: 0px;
font-size: 1.2em;
}
h1 {
font-family: "Times New Roman", Georgia, Serif;
margin-top: 0px;
}
footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: "Times New Roman", Georgia, Serif;
padding: 20px;
}
#wrapper {
margin: auto;
width: 80%;
background-color: #90C7E3;
min-width: 960px;
max-width: 2048px;
box-shadow: 3px 3px 3px #333333;
position: relative;
}
.middle-content {
padding-left: 1%;
padding-right: 1%;
padding-bottom: 1%;
}
.main {
background-color: #FFFFFF;
border: 3px solid white;
margin-left: 190px;
padding-left: 30px;
margin-bottom: 5%;
}
table {
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
width: 80%;
text-align: center;
}
table, th, td {
border: 2px solid #90C7E3;
}
th, td {
padding: 15px;
}
th {
background: #000033;
color: white;
}
td:nth-child(2) {
text-align: left;
}
Here is a little test in jsfiddle: https://jsfiddle.net/a2Lxqxqe/2/ (I'm not sure about browser compatibility issues but you can see it working just fine in Chrome):
document.addEventListener("DOMContentLoaded", function(event) {
var tr = document.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
tr[i].addEventListener("mouseover", function() {
this.style.backgroundColor = "#8888FF";
});
tr[i].addEventListener("mouseout", function() {
this.style.backgroundColor = "transparent";
});
}
});
function printDate() {
document.write(Date());
}
Instead of addEventListener you can use attachEvent() if you need support for: IE8 and below and/or Opera 6 and below. Here is a little reference to this: http://www.w3schools.com/jsref/met_document_addeventlistener.asp
I wrapped the code in document.addEventListener("DOMContentLoaded", function(event){ ... }) so the code executes after the DOM is loaded, if not you'll get an error when hovering.
I want to have a table, such that if the width of the page decreases the columns of the table should be displayed one below the other.
You can use CSS display properties to alter the way the table behaves. In order to make the table cells sit one on top of the other, you need to create a media query which will set the table and each cell to be display: block at the break point that best suits your needs.
In the example below the table cells will wrap when the screen width shrinks to 500px.
Example
#media (max-width: 500px) {
table {
display: block;
border: solid 1px #f00;
}
table td {
display: block;
border: solid 1px #f00;
}
}
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Explanation
By default a table tag uses display: table and a table cell uses display: table-cell. By changing these properties we can alter the way the table is displayed.
For more information on display properties see this article:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
For more information on media queries see the following article:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Alright if i understand correctly you want something like this:
http://codepen.io/geoffyuen/pen/FCBEg
This Solution wil make your table responsive so it can do what you are trying to do(at leat i think i know what youre trying to do)
Just some example html code
<h1>RWD List to Table</h1>
<table class="rwd-table">
<tr>
<th>Movie Title</th>
<th>Genre</th>
<th>Year</th>
<th>Gross</th>
</tr>
<tr>
<td data-th="Movie Title">Star Wars</td>
<td data-th="Genre">Adventure, Sci-fi</td>
<td data-th="Year">1977</td>
<td data-th="Gross">$460,935,665</td>
</tr>
<tr>
<td data-th="Movie Title">Howard The Duck</td>
<td data-th="Genre">"Comedy"</td>
<td data-th="Year">1986</td>
<td data-th="Gross">$16,295,774</td>
</tr>
<tr>
<td data-th="Movie Title">American Graffiti</td>
<td data-th="Genre">Comedy, Drama</td>
<td data-th="Year">1973</td>
<td data-th="Gross">$115,000,000</td>
</tr>
</table>
Then we have our CSS
#import "compass/css3";
// More practical CSS...
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)
$breakpoint-alpha: 480px; // adjust to your needs
.rwd-table {
margin: 1em 0;
min-width: 300px; // adjust to your needs
tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
th {
display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
}
td {
display: block;
&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}
&:before {
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
font-weight: bold;
// optional stuff to make it look nicer
width: 6.5em; // magic number :( adjust according to your own content
display: inline-block;
// end options
#media (min-width: $breakpoint-alpha) {
display: none;
}
}
}
th, td {
text-align: left;
#media (min-width: $breakpoint-alpha) {
display: table-cell;
padding: .25em .5em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
// presentational styling
#import 'http://fonts.googleapis.com/css?family=Montserrat:300,400,700';
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.rwd-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
tr {
border-color: lighten(#34495E, 10%);
}
th, td {
margin: .5em 1em;
#media (min-width: $breakpoint-alpha) {
padding: 1em !important;
}
}
th, td:before {
color: #dd5;
}
}
Hope this helps you
I have a cross-browser compatibility problem.
Here is a jsfiddle of my code.
Essentially, the desired effect is for the squares to be opacity="0.5" onmouseout and opacity ="1" onmouseover. The squares, once clicked, redirect to a page.
The code works as desired on Chrome, but on IE 11 the background images doesn't show up. Also I noticed the opacity function for onmouseout/onmouseover doesn't work.
<html>
<head>
<script>
function bigImg(x) {
x.style.opacity = "1";
}
function normalImg(x) {
x.style.opacity = "0.5";
}
</script>
<style type="text/css">
table.imagetable {
font-family: verdana, arial, sans-serif;
font-size:11px;
color:#FFFFFF;
border-width: 3px;
border-color: #FFFFFF;
table-layout: fixed;
}
table.imagetable th {
border-width: 3px;
padding: 3px;
border-style: solid;
border-color: #FFFFFF;
border-spacing: 3px;
width: 200px;
height: 200px;
}
table.imagetable td {
border-width: 3px;
padding: 3px;
border-style: solid;
border-color: #FFFFFF;
border-spacing: 3px;
width: 200px;
height: 200px;
}
table.imagetable td:hover {
cursor: pointer;
cursor: hand;
}
#app1 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue.png");
}
#app2 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue2.png");
}
#app3 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue3.png");
}
#app4 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue4.png");
}
#app5 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue5.png");
}
</style>
</head>
<table class="imagetable">
<tr>
<td id="app1" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
<td id="app2" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
<td id="app3" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
</tr>
<tr>
<td id="app4" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
<td id="app5" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
</tr>
</table>
</html>
EDIT:
Ok so everything is working properly now, the path to the images is blocked since they are provided from a website under construction and requires login. IE 11 had a problem with such even when logged in on the browser, chrome didn't. See the below jsfiddle for working desired effect.
http://jsfiddle.net/nP7pd/4/