Scotty Posted November 14, 2014 Share Posted November 14, 2014 Evening. I have a website and instead of showing the home page first, I would like a image of our Xmas dinner poster to been shown first. Then by clicking on it, it disappears.... Leaving the website to act as normal. I have no idea what you call this and how to do it, hence my request for help Cheers in advance Link to comment Share on other sites More sharing options...
niche Posted November 14, 2014 Share Posted November 14, 2014 (edited) could be as simple as a link see the ref "image as link" http://www.w3schools.com/html/html_links.asp Edited November 14, 2014 by niche Link to comment Share on other sites More sharing options...
Scotty Posted November 14, 2014 Author Share Posted November 14, 2014 I understand how to click on the image and go to the home page, what I dont get is how to display the image on the initial attempt to access the site ? If I make it as my index.html then it will always show the image, no ? Link to comment Share on other sites More sharing options...
Ingolme Posted November 14, 2014 Share Posted November 14, 2014 You can combine lightbox with some Javascript and cookies or web storage. The light box makes the image appear in front of the page. You need a bit of Javascript to make the lightbox open automatically, and you use cookies to tell the user's computer to remember that it already showed the box to them. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 15, 2014 Share Posted November 15, 2014 Basic setup, image will stretch to fill entire screen, if you require it to be proportional set background: url('http://res1.windows.microsoft.com/resbox/en/windows/main/a582d358-3426-4220-a3bc-693419cfb199_4.jpg') no-repeat center center / 100% 100% rgba(0, 0, 0, 0.7); to background: url('http://res1.windows.microsoft.com/resbox/en/windows/main/a582d358-3426-4220-a3bc-693419cfb199_4.jpg') no-repeat center center / auto 100% rgba(0, 0, 0, 0.7); <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { // check if webstorage disabled or not supported (window.localStorage) older IE browsers less than 8 if not show warning and stop if (typeof (Storage) === "undefined" || window.localStorage === "undefined") { $('body').html("Sorry, your browser does not support Web Storage..."); return false; } if (localStorage.clickcount) { // if clickcount already exists increase value by 1 localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { // else set clickcount to 0 localStorage.clickcount = 1; } if (Number(localStorage.getItem("clickcount")) === 1) { $('body').append('<div id="home_bg" title="click to continue"></div>'); } else { $('#home_bg').remove(); } $('#home_bg').click(function() { $('#home_bg').remove(); }); }); </script> <style type="text/css"> #home_bg {background: url('http://res1.windows.microsoft.com/resbox/en/windows/main/a582d358-3426-4220-a3bc-693419cfb199_4.jpg') no-repeat center center / auto 100% rgba(0, 0, 0, 0.7); position: fixed; left:0; right:0; top: 0; bottom: 0; z-index:999999;} </style> </head> <body> <div>TODO write content</div> </body></html> Link to comment Share on other sites More sharing options...
keytone Posted November 21, 2014 Share Posted November 21, 2014 I believe I understand what you want to do ( or have you already done it? ) I'm curious...do you have the website available to look at? JD Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now