I have a site where I want the header buttons (which are images) to have a normal state, rollover state, and a current page state, where when that page is viewed, the header button displays a different image than normal. I should note this website draws from a database with php.
html:
<body>
<div class="header" id="header1">
<a href='index.php?Program=BIT' class="header_bit" id="header_bit" style="text-decoration:none; color:#FFF">
<img alt="Photonics & Laser Technology"
src="+images/_header_all/bit_normal_v2.png"
onmouseover="this.src='+images/_header_all/bit_hover_v2.png'"
onmouseout="this.src='+images/_header_all/bit_normal_v2.png'"
width="180px" height="250px"/>
</a>
<a href='index.php?Program=IMD' class="header_imd" id="header_imd" style="text-decoration:none; color:#FFF">
<img alt="Interactive Multimedia & Design"
src="+images/_header_all/imd_normal_v2.png"
onmouseover="this.src='+images/_header_all/imd_hover_v2.png'"
onmouseout="this.src='+images/_header_all/imd_normal_v2.png'"
width="180px" height="250px"/>
</a>
<a href='index.php?Program=NET' class="header_net" id="header_net" style="text-decoration:none; color:#FFF">
<img alt="Networking Technology"
src="+images/_header_all/net_normal_v2.png"
onmouseover="this.src='+images/_header_all/net_hover_v2.png'"
onmouseout="this.src='+images/_header_all/net_normal_v2.png'"
width="180px" height="250px"/>
</a>
<a href='index.php?Program=PLT' class="header_plt" id="header_plt" style="text-decoration:none; color:#FFF">
<img alt="Photonics & Laser Technology"
src="+images/_header_all/plt_normal_v2.png"
onmouseover="this.src='+images/_header_all/plt_hover_v2.png'"
onmouseout="this.src='+images/_header_all/plt_normal_v2.png'"
width="180px" height="250px"/>
</a>
<a href='index.php?Program=IRM' class="header_irm" id="header_irm" style="text-decoration:none; color:#FFF">
<img alt="Information Research Technology"
src="+images/_header_all/irm_normal_v2.png"
onmouseover="this.src='+images/_header_all/irm_hover_v2.png'"
onmouseout="this.src='+images/_header_all/irm_normal_v2.png'"
width="180px" height="250px"/>
</a>
</div>
</body>
css:
/*Program header items*/
#header_bit{
position:relative;
top:10px;
left:20px;
}
/*#header_bit:active img{
background-image:url(+images/_header_all/imd_hover_v2.png);
background-repeat:no-repeat;
}*/
#header_imd{
position:relative;
top:10px;
left:20px;
}
#header_net{
position:relative;
top:10px;
left:20px;
}
#header_plt{
position:relative;
top:10px;
left:20px;
}
#header_irm{
position:relative;
top:10px;
left:20px;
}
I'm at a loss, all methods I've found no not apply or don't work. Any help is welcome, thanks.
Related
I am trying to create an email signature using html and an image I designed in Photoshop. I have sliced the image in PS and saved the slices out onto my PC. I now want to add links to certain slices and have managed to do this but the code is very messy and poor so I know that there is a better way to do it. I have attached the code below.
The links are not the actual links and are just placeholders for now. I also know that I need to save the images externally and will get round to it but just want to try and get the code sorted for now. I also understand that the image size is massive for an email signature so can I just add a "max-width" and "max-height" to the code to size it down or do I have to individually change all the sizes of each slice?
Finally, will this a spliced html image display well as an email signature or, because there are so many images attached to it, will it just go straight into spam?
<!DOCTYPE html>
<html>
<style>
div {
position: absolute;
}
</style>
<head></head>
<body>
<a href="" />
<div style="background-image:url('img/img1.jpg'); left:0px; top:0px; width:2000px; height:122px"></div>
<a href="" />
<div style="background-image:url('img/img2.jpg'); left:0px; top:122px; width:124px; height:222px"></div>
<a href="https://www.linkedin.com" />
<div style="background-image:url('img/img3.jpg'); left:124px; top:122px; width:866px; height:198px"></div>
<a href="" />
<div style="background-image:url('img/img4.jpg'); left:990px; top:122px; width:1010px; height:102px"></div>
<a href="" />
<div style="background-image:url('img/img5.jpg'); left:990px; top:224px; width:246px; height:576px"></div>
<a href="https://www.bing.com" />
<div style="background-image:url('img/img6.jpg'); left:1236px; top:224px; width:630px; height:120px"></div>
<a href="" />
<div style="background-image:url('img/img7.jpg'); left:1866px; top:224px; width:134px; height:576px"></div>
<a href="" />
<div style="background-image:url('img/img8.jpg'); left:124px; top:320px; width:866px; height:24px"></div>
<a href="" />
<div style="background-image:url('img/img9.jpg'); left:0px; top:344px; width:122px; height:456px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img10.jpg'); left:122px; top:344px; width:540px; height:150px"></div>
<a href="" />
<div style="background-image:url('img/img11.jpg'); left:662px; top:344px; width:328px; height:456px"></div>
<a href="" />
<div style="background-image:url('img/img12.jpg'); left:1236px; top:344px; width:630px; height:42px"></div>
<a href="" />
<div style="background-image:url('img/img13.jpg'); left:1236px; top:386px; width:48px; height:414px"></div>
<a href="https://www.bing.com" />
<div style="background-image:url('img/img14.jpg'); left:1284px; top:386px; width:482px; height:56px"></div>
<a href="" />
<div style="background-image:url('img/img15.jpg'); left:1766px; top:386px; width:100px; height:414px"></div>
<a href="" />
<div style="background-image:url('img/img16.jpg'); left:1284px; top:442px; width:482px; height:42px"></div>
<a href="" />
<div style="background-image:url('img/img17.jpg'); left:1284px; top:484px; width:62px; height:316px"></div>
<a href="https://www.linkedin.com" />
<div style="background-image:url('img/img18.jpg'); left:1346px; top:484px; width:94px; height:90px"></div>
<a href="https://www.facebook.com" />
<div style="background-image:url('img/img19.jpg'); left:1440px; top:484px; width:60px; height:82px"></div>
<a href="https://www.twitter.com" />
<div style="background-image:url('img/img20.jpg'); left:1500px; top:484px; width:94px; height:90px"></div>
<a href="https://www.instagram.com" />
<div style="background-image:url('img/img21.jpg'); left:1594px; top:484px; width:92px; height:82px"></div>
<a href="" />
<div style="background-image:url('img/img22.jpg'); left:1686px; top:484px; width:80px; height:316px"></div>
<a href="" />
<div style="background-image:url('img/img23.jpg'); left:122px; top:494px; width:540px; height:30px"></div>
<a href="" />
<div style="background-image:url('img/img24.jpg'); left:122px; top:524px; width:2px; height:88px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img25.jpg'); left:124px; top:524px; width:418px; height:62px"></div>
<a href="" />
<div style="background-image:url('img/img26.jpg'); left:542px; top:524px; width:120px; height:276px"></div>
<a href="" />
<div style="background-image:url('img/img27.jpg'); left:1440px; top:566px; width:60px; height:234px"></div>
<a href="" />
<div style="background-image:url('img/img28.jpg'); left:1594px; top:566px; width:92px; height:234px"></div>
<a href="" />
<div style="background-image:url('img/img29.jpg'); left:1346px; top:574px; width:94px; height:226px"></div>
<a href="" />
<div style="background-image:url('img/img30.jpg'); left:1500px; top:574px; width:94px; height:226px"></div>
<a href="" />
<div style="background-image:url('img/img31.jpg'); left:124px; top:586px; width:418px; height:26px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img32.jpg'); left:122px; top:612px; width:406px; height:62px"></div>
<a href="" />
<div style="background-image:url('img/img33.jpg'); left:528px; top:612px; width:14px; height:188px"></div>
<a href="" />
<div style="background-image:url('img/img34.jpg'); left:122px; top:674px; width:406px; height:126px"></div>
</body>
</html>
Email is not web! Absolute positioning is an advanced trick that requires lots of hacks to work, and even <div>s are problematic, for Outlooks. Background images are also very tricky (there are plenty of answers on SO about these things individually).
Nobody knows all the spam rules, because otherwise people would subvert them, however, having so many links at the bottom of your message could easily be considered spammy. It's also risky because it's not normal. So I would advise against this method.
You will want to produce a HTML table, with <img>s (or just one image). However, best practice is to write out text in HTML, rather than have it in the image. I can't see the image so I can't give you sample code, other than something generic for a scalable image:
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#">
<img src="https://via.placeholder.com/600x200" width="600" style="max-width:100%;height:auto;" />
</a>
</td>
</tr>
</table>
</body>
So I have an ambitious idea on something I want to do specifically and want to know the best way to carry it out or if it's even possible.
I want it so when I hover over one of the tabs it plays a gif animation (like some arrow or something) once then leaves it in that last frame (so it doesn't continuously loop then is clickable.
I doubt my code will be any help at all but I'll leave it here anyway (I know it's messy and that I should fix it but I'm sorta new to this.)
<!DOCTYPE html>
<html lang="en-US">
<html>
<style>
head {
background-color: white;
}
span.mainbar {
display: inline-block;
margin-left:10px;
margin-top:3px;
}
span.text {
display: inline-block;
float:right;
margin-right:25px;
margin-top: 27px;
}
span.bar
{
display: inline-block;
float:right;
margin-right:25px;
margin-top: 20px;
}
span.facebook {
display: inline-block;
float:right;
margin-right:30px;
margin-top: 22px;
}
span.instagram{
display: inline-block;
float:right;
margin-right:22px;
margin-top: 22px;
}
span.twitter{
display: inline-block;
float:right;
margin-right:30px;
margin-top: 16px;
}
</style>
<head>
<title> The Project </title>
<link rel="shortcut icon" href="images/favicon.ico"/>
<span class="mainbar">
<a href="Homepage.html">
<img src="images/Temp Text Logo.png" alt="Main Logo" style=";border:0;">
</a>
</span>
<Span class="twitter">
<a href="https://www.twitter.com"target="_blank">
<img src="images/twitter.png" alt="twitter page"
style="width:50px;height50px:;border:0;">
</a>
</span>
<Span class="instagram">
<a href="https://www.instagram.com"target="_blank">
<img src="images/instagram.png" alt="instagram page" style=";border:0;">
</a>
</span>
<Span class="facebook">
<a href="https://www.facebook.com"target="_blank">
<img src="images/facebook.png" alt="facebook page" style=";border:0;">
</a>
</span>
<span class="bar">
<img src="images/bar.png" alt="bar" style=";border:0;">
</a>
</span>
<span class="text">
<a href="about.html">
<img src="images/about.png" alt="about" style=";border:0;">
</a>
</span>
<span class="text">
<a href="shop.html">
<img src="images/shop.png" alt="shop" style=";border:0;">
</a>
</span>
<span class="text">
<a href="Homepage.html">
<img src="images/home.png" alt="Home" style=";border:0;">
</a>
</span>
</head>
<body>
<hr>
</hr>
</body>
</html>
Tab example pic
All you need to do to make an image clickable is to wrap the image in a hyperlink parent:
<a href="http://www.google.com">
<img src="http://placehold.it/100">
</a>
As for only allowing the link to be clickable after the animation has played, it would theoretically be possible through JavaScript, but I wouldn't recommend that. The only way to do it would be with a timeOut, and you would possibly encounter a state where the timing gets out of sync.
Instead of this, I would recommend using a sprite map instead of a GIF.
Hope this helps! :)
You can't control animated gif without javascript/jquery control.
With 2 image, one static and one animated and control the start of animation with jquery, like this solution: Stop a gif animation onload, on mouseover start the activation
Using jquery plugin like this: http://rubentd.com/gifplayer/
I suspect I'm doing something stupid but I have some hyperlinks styled as images with css but they don't work as links.
Experimental page is at http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on
and it's the 'Read more' and 'buy tickets' buttons.
The page is built by php but the html looks like this...
<td>
<div class="sg-read-more">
Find out more
</div>
<div class="sg-book-ticket">
Book Ticket
</div>
</td>
The CSS is this....
div.sg-book-ticket {
display:block;
position:absolute;
background:url(images/buy-ticket.png) no-repeat 0 0;
right:15px;
bottom:2px;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket:hover {
background-position:0 -40px;
}
The images display correctly and the rollover works, but they aren't links.
What have I missed?
I personally would style the link as opposed to the div
div.sg-book-ticket{
position:absolute;
right:15px;
bottom:2px;
}
div.sg-book-ticket > a{
display:block;
background:url(images/buy-ticket.png) no-repeat 0 0;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket a:hover{
background-position:0 -40px;
}
if you want the whole div to be clickable, use this :
<td>
<a href="#">
<span class="sg-read-more">
</span>
</a>
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">
<span class="sg-book-ticket">
</span>
</a>
</td>
Can you try the following?:
<a href="<a href="http://www.ticketsource.co.uk/event/70577" target="_blank" alt="book ticket" />
<img src="images/buy-ticket.png" />
</a>
instead of putting the image in the css?
I have a rotating carousel done using webkit animation and CSS. There are 3 items under the carousel and each item has a photo and a blurb of text. I'm trying to link the text to 3 different links.
Right now all 3 text boxes are linked to the same link ( the last one ). I have a feeling it might have something to do with z-index, but I'm not sure. I've put all my code into a jsfiddle.
http://jsfiddle.net/LGbbf/1/
Any help is appreciated!
HTML code involved
<div class="gallery-area">
<ul>
<li>
<div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/IYF-Family-Treasures.jpg" /> </div>
<div class="txt-box">
<p>Send in a photo of your family, friends and neighbours enjoying the Chinese New Year festivities and stand to WIN a $400 IKEA Gift Card ANG BAO! <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></p>
</div>
</li>
<li>
<div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/cny.png" /> </div>
<div class="txt-box">
<p>Chinese New Year is a time when families get together to celebrate. Check out the events where you and your family can celebrate during this festive period. <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></p>
</div>
</li>
<li>
<div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/AboutIYF_carousel_ver4.png" /> </div>
<div class="txt-box">
<p>2014 is the International Year of the Family. We invite all to join us in the spirit of love and respect, commitment and big-heartedness. <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></p>
</div>
</li>
</ul>
</div>
CSS code involved
.info-img-box {
box-shadow:0 9px 6px -6px #929292;
-webkit-box-shadow:0 9px 6px -6px #929292;
overflow:hidden;
position:relative;
margin:0 0 32px;
}
.info-img-box img {
vertical-align:top;
}
.info-img-box .txt-box {
position:absolute;
bottom:0;
left:0;
width:100%;
background:url(http://app.msf.gov.sg/Portals/0/Files/IYF/bg-txt-box-img.png);
padding:8px 0 10px;
}
.info-img-box .txt-box img{
vertical-align:middle;
}
.info-img-box .txt-box p {
margin:0 13px;
font:13px/16px "Lato", Arial, Helvetica, sans-serif;
}
.info-img-box .txt-box a {
color:#fff;
text-decoration:none;
}
.info-img-box .txt-box a:hover {
text-decoration:underline;
}
.quote-area:after {
content:"";
clear:both;
display:block;
}
just Try this It's working
Change Keyframe css
css:
#-webkit-keyframes round{
0%{opacity:1; z-index:1111}
27%{opacity:1; z-index:1111;}
33%{opacity:0; z-index:0;}
94%{opacity:0; z-index:0;}
100%{opacity:1; z-index:1111;}
}
#keyframes round{
0%{opacity:1; z-index:1111}
27%{opacity:1; z-index:1111;}
33%{opacity:0; z-index:0;}
94%{opacity:0; z-index:0;}
100%{opacity:1; z-index:1111;}
}
Here is updated fiddle http://jsfiddle.net/LGbbf/3/
Hope It Helps you :)
I have a bunch of links on the top and bottom of my page. I'll align the links will look aligned in Chrome but when I check out the page using Firefox the links are not in the same position they've moved down a few spots. This is driving me nuts.
here is the link to my webpage
The CSS for the bottom links
#navbot {
color:silver;
white-space:nowrap;
text-align:left;
position:relative;
top:50px;
left:36px;
}
#navbotS {
color:silver;
white-space:nowrap;
text-align:left;
position:relative;
top:48px;
left:44px;
}
#navbotimg {
top:0px;
clear:both;
float:left;
position:relative;
left:168px;
}
#navbot2 {
position:relative;
min-width:800px;
white-space:nowrap;
color:silver;
top: 10px;
left:190px;
}
#navbot3 {
position:relative;
min-width:1380px;
white-space:nowrap;
color:silver;
top: -8px;
left:158px;
}
#mails li {
float:right;
list-style:none;
margin:0 205px 0px -999px;
}
The HTML
<div id='navbot'>
<a class="ex2" href="#" >PERFORMANCE </a>
</div>
<div id='navbotS'>
<a class="ex3" href="#">SPORTSWEAR </a>
</div>
<div id ='navbotimg'>
<img src="MAIN_IMAGES/red_line.png" width="8" height="60"> </div>
<div id ='navbot2'>
<a class="ex1 various11" href="FOOTWEAR_SUB_PAGES/NIKE_SNOW.html">ZOOM FORCE ONE ///</a>
<a class="ex1 various1" href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html">MERCURIAL SUPERFLY ///</a>
<a class="ex1 various2" href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html">AIRMX MOTO BOOT ///</a>
<a class="ex1 various3" href="FOOTWEAR_SUB_PAGES/le-coq-joakim-noah.html">JOAKIM NOAH ///</a>
<a class="ex1 various" href="FOOTWEAR_SUB_PAGES/NIKE_BMX.html">DUNK GYRIZO</a>
</div>
<div id ='navbot3'>
<ul id="mails">
<a class="ex1 various5" href="FOOTWEAR_SUB_PAGES/NIKE_AIRMAX_90.html">AIRMAX 90 ///</a>
<a class="ex1 various7" href="FOOTWEAR_SUB_PAGES/SUB_PAGE_CORTEZ_FLYMOTION.html" >CORTEZ FLY MOTION ///</a>
<a class="ex1 various" href="FOOTWEAR_SUB_PAGES/sub_page_org.html">ORIGINALS ///</a>
<a class="ex1 various8" href="FOOTWEAR_SUB_PAGES/SUB-PAGE-ARTHUR_ASH.html">ARTHUR ASHE ///</a>
<a class="ex1 various9" href="FOOTWEAR_SUB_PAGES/SUB_PAGE_STUSSY_DUNK_TRAINER.html">STUSSY DUNK TRAINER ///</a>
<a class="ex1 various10"href="FOOTWEAR_SUB_PAGES/SUB_PAGE_AIR_MAX_1.html">AIR MAX I MAXIM</a>
<li><a class="mails" href="mailto:info#ernsteverything.com">INFO#ERNSTEVERYTHING.COM         </a></li>
<li><img src="MAIN_IMAGES/mail_2.png" width="28" height="18" border="0" ></li>
</ul>
</div>