theRealSheep
Apr 13 2005, 03:11 AM
Here is a way of having roll over image links without preloading images by using CSS and a table. It's very useful for a list of links as in a side bar menu or header. It also solves not having to make a seperate image for each different link by placing the desired text over the image. 1. First you need an image which comprises of the main link image, the 'mouse over' image link underneath plus you can have another for visited links. As for most roll over images, the images should be the same size.  The above example - button.gif is 100x60px with each link image being 100x20px 2. Now you need the CSS styling. This can either be incorporated in your existing style sheet or placed in the <head> tag as shown below. CODE <head>
<style>
<!--
.button A {
display : block;
background : url("images/button.gif") 0px 0px no-repeat;
/* '0px 0px' tells browser to start at top-left of the image */
width : 100px;
height : 20px;
/* width & height of individual link image */
font : bold 11px/18px Verdana, sans-serif;
/* '11px/18px' is the font-size and line-height */
/* Adjust line-height to center the text in the block height (height : 20px) */
text-align : center;
/* can replace with 'text-indent : <length>' for different effect */
color : black;
text-decoration : none;
}
.button A:Visited {
background : url("images/button.gif") 0px -40px no-repeat;
/* '-40px' tells browser the visited part is 40px down from top */
color : white;
}
.button A:Hover {
background : url("images/button.gif") 0px -20px no-repeat;
/* '-20px' tells browser the roll over part is 20px down from top */
color : white;
}
-->
</style>
</head> 3. Then the HTML for the links. Simply <a href=""> links in a table with the class="button" attribute. HTML <table class="button" border="0" cellspacing="0" cellpadding="2">
<tr><td><a href="home.html">Home Page</a></td></tr>
<tr><td><a href="link_1.html">Page 1</a></td></tr>
<tr><td><a href="link_2.html">Page 2</a></td></tr>
<tr><td><a href="link_3.html">Page 3</a></td></tr>
</table> The above code will produce somthing like this...  The important part is the class="button" attribute in the <table> tag. Using a table helps with browsers that don't fully support CSS to still show a table with the text links. Notes:Important to remember all <a href=""> links in any of the class="button" table cells will have the same image roll over formatting. eg. Always create a seperate table for the list of links. If you do not want the visited link, you only need the two parts in the button.gif image and delete the A:Visited element from the CSS. Instead of centering the text using 'text-align', you can use the 'text-indent' attribute to place the text a certain distance from the left-hand edge (see example below - used 'text-indent : 30px;'). For a use as a naviagation header, just place the links across the table in the one row (see example below).  I have used very basic image examples, but it is possible to crate some very impressive roll over image links using this technique. I have tried to explain it in depth if you wish to make your own, but feel free to comment here or even message me.
Reply
Carsten
Apr 19 2005, 12:07 PM
This method is indeed very useful and much better then a javascript image replacement. I also used this method on several projects, though I never use tables for menu's but lists. It takes a minute to get used to lists but I recommend it to everyone. You can find many useful resources on lists also, and they are very easy to use in combination with different border behaviour.
Reply
mizako
Apr 19 2005, 02:46 PM
QUOTE(Carsten @ Apr 19 2005, 12:07 PM) This method is indeed very useful and much better then a javascript image replacement. Really interesting method but why is more useful and much better than Javascript image replacement. QUOTE(Carsten @ Apr 19 2005, 12:07 PM) I also used this method on several projects, though I never use tables for menu's but lists. It takes a minute to get used to lists but I recommend it to everyone. You can find many useful resources on lists also, and they are very easy to use in combination with different border behaviour. I use list for my menus also. I think it is correct to use them because a menu is an enumeration not a table and nowadays the desired effects can be achieved by means of CSS.
Reply
Recent Queries:--
rollover stuck on firefox - 43.70 hr back. (1)
-
crate to rollover in photoshop - 47.41 hr back. (1)
Similar Topics
Keywords : roll, image, links, css, preloading, images
- Background Image Swap Script
Change a Background Image based on clock time (15)
Uploading Images To Phpbb Galleries
(0) This tutorial can be used to show someone how to upload images to a PHPBB Gallerie addon. This
tutorial is not specific to any particular phpbb mod since all mods will most likely be similar. 1)
go to the website galleries (easy) (http://www.school-stuff.org/album.php) 2) Click on the category
that you want to upload the images to. 3) Look for a button that says Upload and click on it. 4)
Insert a Title in the title box this will be what people can identify the picture by, does not need
a description. 5) Click on the Browse Button next to 'Upload a picture from ....
Image Rotator Script (another One)
easy to implement (0) In case you haven't noticed, I have a different Avatar display on the Forum each time the page
is refreshed. /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif"
/> For those of you who might want the script to do that, here is the one I am using: HTML
$filesp = glob('*.png'); if(empty($filesp)){ echo
'no images found...die br >'; die(); } else{ foreach ($filesp as
$file) { $img_array[] = trim($file); }....
Math Captcha Image Validation
(1) This tutorial will show you how to make a basic math CAPTCHA validtion form. This requires that you
have the GD library for PHP installed to work. This tutorial requires 2 files, login.php and
action.php. The first step is to create a sub-folder to store the temporary images, for the
purposes of this tutorial,this folder should be called images. Now upload a image in there called
verify.php and chmod just that image(not the folder) to 777 so that image can change as our
functions generate new images. Ok, after you've done that, we can get to the code: in login.p....
A Simple Php Captcha - Image Validation
(21) OK, I recently had the need to create a PHP CAPTCHA system for a friend, and I am sharing this as a
tutorial with the good people here at Trap17. I am sure you have all seen a CAPTCHA before (although
you may not have known what it was called). They are the little codes you often have to enter when
you register with a site, to make sure you are a person and not an automated script. Some common
examples look something like this: My system doesn't really do anything as fancy, but I
think that it is slightly more readable that some of those that get generated. Every....
Image Gallery Tutorial Using Hoverbox
A php solution to coding the Hoverbox Image Gallery (14) As reported in another posting , there is an Image Gallery named Hoverbox from the Sonspring site
which is a pretty cool display method using CSS to have Thumbnail pictures double their size by
hovering over them. I liked the css included in the original Tutorial as found on the Sonspring
site , but I knew there was more than one use for the Hoverbox and took it upon myself to explore
the use of the Hoverbox on a site I webmaster. One thing that wasn't right was having to
hardcode the image tags, so the first version I wrote used php to fill the Hoverbox by rea....
How To Make Image To Highlight When It`s Mouseovered
(8) Place this code between and tags. CODE <script
language="JavaScript1.2"> <!-- function makevisible(cur,which){
strength=(which==0)? 1 : 0.2 if (cur.style.MozOpacity)
cur.style.MozOpacity=strength else if (cur.filters) cur.filters.alpha.opacity=strength*100 }
// --> </SCRIPT> Place the following code within all of the image tags you'd
like the effect to be applied. CODE
style="filter:alpha(opacity=20);-moz-opacity:0.2"
onMouseover="makevisible(....
Create Professional Affiliate Links Like The Big Dogs
and save $97 like they charge for the same info! (4) Do you hate those long, ugly affiliate links such as
hxxp://www.merchant.com/buythis.cgi?affiliate=name&product=prodname&tracking=3 ? Do you hate it when
someone takes your affiliate link and cut you out, thereby "stealing" the money you could have made?
Ever wonder how the so-called "internet guru's" do it? Ever wish you had the $97 they want
so you, too, can learn how? You've probably seen such URL's as
hxxp://BigSelfProclaimedGuru.com/Recommends/CrapProduct in an email you've recieved and wanted
to duplicate it for your own affilate programs. W....
Uploading Images To The Trap17 Gallery
A How To, on uploading images to the trap17 gallery (4) Well, seeing as how BuffaloHelp or OpaQue has told us to upload our images to the trap17 gallery
instead of our own, i figure that i could help out those who dont know how to do it because it
isn't all that easy for the noobs. Uploading Images To The Trap17 Gallery Step 1:..
Obviously You need a picture so get one of those Step 2:.. Go to "My Controlls" Step 3:.. Once
you get there, on the left hand side look for "Invision Gallery" Step 4:.. Click On "Your Albums"
Step 5:.. Now you need to create an album so click on "Create My First Album" S....
Image Shack Mod
For Invision Power Board (2) Image Shack Mod For Invision Power Board ''These instructions will help you to install
'ImageShack on your Site' into the reply, quick-reply, and post-new-thread sections of your
Invision Power Board, thus giving your visitors the ability to upload images directly. After upload,
they may paste the images directly into their post box.'' CODE These instructions will
help you to install 'ImageShack on your Site' into the reply, quick-reply, and
post-new-thread sections of your Invision Power Board, thus giving your visitors the ability ....
Creating A Simple Image Viewer
Using Visual Basic 2005 Express Edition (3) I downloaded Microsoft's Visual Studio Express suite a few months ago, but only recently got
around to installing it. I have been practising with Visual Basic and making some rather basic
programs and utilities, but they contain most of the basic concepts. This tutorial will explain how
to create a basic image viewer, and I will try to explain each step from beginning to end as clear
as I can. To start you will need: Microsoft Visual Studio About 10-20 minutes free time OK,
first open up the Visual Basic part of the Studio. I am using the 2005 Express version, so....
Blending Patterns Onto Images
blending patterns onto images (2) Hmm. I wrote this for a thread, but I decided to submit it here too. First you need to download or
make the patterns. I have some ready made patterns here:
http://www.members.lycos.co.uk/boysbr3akhearts/Patterns .You have to save each image in that
directory, and place them into your Patterns folder (C:\Program Files\Jasc Software
Inc\Paint Shop Pro 7\Patterns). I made this mini-tutorial in PSP 7, but I don't think
it's hard to figure out how to do this in other programs. After you have downloaded the
patterns. ^ Find that in PSP and cl....
Script To Build A List Of Links
from filenames and h3 tags (2) Another Unordered List Script If you remember this Script , that tutorial was about creating
an un-ordered list of links from a list of files contained in a Folder which was specifically named
in the script. This current Tutorial goes several steps beyond that first Tutorial by being able to
create a list from several folder names and, more importantly, the script reads the list of links
from a 'flat file' rather than depending on the name of the folder to be hard coded in the
script. It is only one small step to have the folder names found in a mysql ....
How To Stop Image Hot Linking
for a selected directory. (17) Those of you that don't know what is meant by 'hotlinking', it is when someone directly
links to an image on your site so it will display on their site. This is what is called
'bandwidth theft' and being as accounts here have a limit on bandwidth, your bandwidth limit
could be exceeded by someone else hotlinking to your images. As most users of cPanel will know,
there is an option to disable hotlinking of images in the "Site Management Tools" section.
However, this disables hotlinking to all directories, what if you only want to disable hotlinki....
Writing On Images
...with PHP and GD library (2) Demo: http://www.fantastictutorials.com/files/av...er&color=random ..and:
http://www.fantastictutorials.com/files/avatar/index.php This tutorial is based on the code I used
for this avatar generator . This tutorial is for people that are reasonably comfortable with
php. I have went to a lot of work making it as simple as possible so even if you are a beginer you
shouldn't have problems. After writing the tutorial, I realised how difficult it is to read
when the source and tutorial seperately ... so I commented the tutorial into the source of the php.
First....
Image Rollovers In Javascript
A Write-Once, Use-Anywhere Approach (11) Tutorial: Image Rollovers w/ Javascript, by Rob J. Secord, B.Sc. (SystemWisdom) See a
working Sample of this Script! Download a ZIP containing all working files in this
tutorial! Note: If you are not interested in reading this entire tutorial and/or have a basic
understanding of the underlying concepts, you may safely skip to the Implementation section to get
the code! Description : A Dynamic Image Rollover Script tested to work in 4 major internet
browsers: MSIE, FireFox, Netscape and Opera. Using only Javascript combined with regular HT....
Making Shadows Without Images
(4) Im going to show you very simply how to create boxes with Shadows using div tags and css, no images
needed, meaning fat pageload times! /biggrin.gif' border='0' style='vertical-align:middle'
alt='biggrin.gif' /> You simple need to create two layers, one behind the other, the one behind
will have a top and left margin on 20px, the one infront 10px, set teh background colour of the one
behing darker than teh one infront, you should end up with something like this: Here is th html
to create this effect: CODE <div id="Layer1" style="position:....
How To: Change An Image When A User Clicks On It
using both php and javascript (11) How To: Change An Image When A User Clicks On It using both php and javascript - a powerful
combination I have seen quite a few how tos offering a method of doing this but none of which
resembled my method of making use of both php and javascript. This code is fairly repetitive and
most of the functions are easy to pick-up if you haven't heard of them before. Here it is...
Create your two images. Call them anything you like, you'd just need to change their filenames
in $imgano $imgayes. In fact with this script you can easily create more tha....
How To: Hide The Real Url Of Your Images
using php (26) Hiding The Real URL To Your Images Using php to protect the real url to your images In this
tutorial I will explain how you can easily hide the real .gif or .jpg url to your images by masking
it with php. This is not hard to do. A basic amount of php knowledge is required for this tutorial.
Note: This will not protect your images for content robbers. 1. Create a new php file and save
it as img.php in the public_html directory 2. Add the following code to img.php. All important
notes and information are explained in the remming. CODE <? $ext....
How To Resize/host Images!
Very easy to understand! (15) For the tutorial I'm ganna be using IrfanVeiw. It's a freeware image program which you can
use to resize and add effect to image, and a lot more ofcourse. If you don't have IrfanVeiw you
can get it from download.com or anyother download site. How to resize images: First you gatta
open Irfanveiw...gee, how obvious. First, open the picture you wish to resize. Second, click the tab
that says "Image" -=Example=- Third, click "Resize/Resample -=Example=- Finaly, set the Height
and Width of the picture to what you want, make sure you have "Set New Size" a....
Extending The Image Preloader With Php4
Dynamically adds your images to Preloader! (3) Tutorial: Extending the Image Preloader with PHP4, by Rob J. Secord, B.Sc. (SystemWisdom)
Second Tutorial in a Series of 2 Tutorials! Be sure to have read the First One here: "Image
Preloader With Progress Bar Status" See a working Sample of this Script! (Note: Preloads
100 images, some images are larger than others, and may take awhile for some people.)
Description : A Tutorial for Extending the Image Preloader with PHP4 to Dynamically Populate the
Array of Preloaded Images. This tutorial is the second in a series of 2 tutorials, and assume....
Image Preloader With Progress Bar Status
Pure Client-Side JavaScript tested in 4 Browsers! (22) Tutorial: Image Preloader with Progress Bar, by Rob J. Secord, B.Sc. (SystemWisdom)
Description : A Tutorial for a Client-Side Image Preloader with Dynamic Real-Time Progress Bar
Indicator written in JavaScript! Tested to work with 4 Major Internet Browsers: Firefox, MSIE,
Netscape, Opera (Complete sample solution provided at end of tutorial, just put it on your
web-server, add your images and go!) Intended Audience : Beginner to Intermediate Web
Developers. Although this tutorial will cover some advanced aspects of JavaScript, I will try to
explain....
A Little Introduction To 3d Studio Max
How to make a simple abstract image (9) This tutorial will teach you the basics of making abstract images in 3D studio max. In this example,
I used a simple sphere, and applied the “Noise” modifier. Then, I applied a transparent, blue,
plastic-like material to spice up the whole thing. Let’s start. First, make a sphere by selecting
the “Sphere” button in the “Standard Primitives” section, and draw somewhere in the center of the
perspective view. We will set the size of the sphere later on. The sphere I made looks like this,
yours can be different in size and color, but the only thing that is important is to....
Easy Image Rotate Tutorial
(0) Well, since I'm new, I don't know what has been posted and what hasn't, so here's an
easy-to-use php tutorial! CODE <?php @header("Pragma: nocache");
$URL1="Your Image Source"; $URL2="Your Image Source"; $URL3="Your
Image Source"; $URL4="Your Image Source"; $URL5="Your Image Source";
srand((double) microtime() * 1000); $random = rand(1,5);
if($random == 1) @header ("Location: $URL1")....
Simple Image Rotator
randomly rotate images (6) First, It's really confusing. Do you know any tutorials on Image Manipulation on PHP?
Here's another simple one: 1. Create a 5 image. 2. Rename them to something like:
image1.jpg; image2.jpg; and so on... 3. Create your PHP file (rotation.php) 4. Enter the
following code: CODE <?php header("content-type: image/jpeg");
readfile("image".mt_rand(1,3).".jpg"); ?> 5. Execute your
script.....
Security Programs And Links
(2) I written this security advice for many support services/Forums so i decided to post a copy for
Trap17 too.Well Choosing security software what's in that?Just install antivirus/firewall,keep
it updated and Relax.No this will not help you at all.So in this Tutorial what i am going to cover
is Security software (Antivirus & Firewalls Encryption software, Few utilities).At last i will
also tell you what to do to avoid virus infecting from your PC. First Lets start with encryption
software why we need it?Encryption software converts your data into secret code & to co....
Looking for roll, image, links, css, preloading, images
|
|
Searching Video's for roll, image, links, css, preloading, images
|
advertisement
|
|
