tempest
Jun 25 2006, 04:29 PM
Place this code between <HEAD> and </HEAD> 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(this,0)" onMouseout="makevisible(this,1)" And your image tag might look like that. CODE <img src="yourimage.gif" width="96" height="134" style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> "yourimage.gif" in last code change to your image URL!!!
Reply
SolarX
Jun 25 2006, 08:50 PM
I'm mostly using the CSS Option a:hover to change the background-image, from a link. But I will try your way the next time. Thanks 
Reply
KoYoda
Jun 25 2006, 09:05 PM
QUOTE(SolarX @ Jun 25 2006, 10:50 PM)  I'm mostly using the CSS Option a:hover to change the background-image, from a link. But I will try your way the next time. Thanks Yes, but with CSS you can't make the image highlight effect, can you? (Only if you load another highlighted image on hover). Pardon me if I am wrong, I would like to be able to do that with CSS, so if anybody knows how please show us. Thanx!
Reply
arcalypse
Jun 26 2006, 04:19 AM
This is pretty basic. It is good though because you'd be suprised how many people are olivious to this type of scripting. There is also a form of HTML that I use of the many. All it really does is take 1 image, and convert it to another when your mouse hovers over it, but if you have 1 picture that is dark, and another of the same picture just lightened a bit, it truly looks like it is highlighted. If you want the code just PM me. It is pretty useful. I perfer HTML over scripting because HTML is a bit easier to understand a lot of the time, but I wouldn't just blow this off because it can have some advantages some of the time, but like I said, it can get complicated sometimes, and a lot of the time if you make 1 mistake with Javascript, it not only ruins the whole script, but it also is HARD as HECK to fix sometimes, where as HTML is a lot easier to modify and looks a bit clearer to the inexperienced.
Reply
Avalon
Jun 26 2006, 10:13 AM
QUOTE(KoYoda @ Jun 26 2006, 07:05 AM)
Yes, but with CSS you can't make the image highlight effect, can you? (Only if you load another highlighted image on hover).
Pardon me if I am wrong, I would like to be able to do that with CSS, so if anybody knows how please show us. Thanx!
Actually, the method shown by tempest IS using CSS, the only difference is that he included the <style> command on the web page with some javascript rather than using a style sheet. It will work the same using either method. I use this method on my web site at http://www.mudmall.com Run your mouse over the 'random image' thumbnail or any thumbnail in a search list to see the effect. My method is a little different and is contained in a style sheet, no javascript required. CODE .image:link { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; width: auto; height: 100px; }
.image:visited { opacity: .65; -moz-opacity: .65; filter: alpha(opacity=65); width: auto; height: 100px; }
.image:hover { -moz-opacity: .65; opacity: .65; filter: alpha(opacity=65,finishopacity=65,style=0); width: auto; height: 100px; }
Reply
Dooga
Jun 26 2006, 03:49 PM
Wow I really like the CSS method! However i'm currently using firefox, so I wouldn't know if it's cross browser supported. However I thought Opera 8 didn't support opacity? Most likely in IE you would have to add some extra hacks in javascript to make it work. Good thing Opera 9 has opacity features! I would like to try this one day..... perhaps someone could post a tutorial on opacity in CSS  However, it seems like Opera just "hides" the picture as it doesn't define opacity...
Reply
tphilakone
Jun 27 2006, 08:58 AM
Avalon
Jun 27 2006, 10:37 AM
QUOTE(Dooga @ Jun 27 2006, 01:49 AM) Wow I really like the CSS method! However i'm currently using firefox, so I wouldn't know if it's cross browser supported. However I thought Opera 8 didn't support opacity? Most likely in IE you would have to add some extra hacks in javascript to make it work. Good thing Opera 9 has opacity features! I would like to try this one day..... perhaps someone could post a tutorial on opacity in CSS However, it seems like Opera just "hides" the picture as it doesn't define opacity... The method I used works the same in both IE (in my version 6 anyways) and Firefox (my browser of choice). These were the 2 browsers I concentrated on making it work for, I don't know about other browsers. According my stats, I have catered for the vast majority of visitors as these are the different browsers used by my visitors in the last month. QUOTE 67.40% MSIE 6.0
20.19% Mozilla/5
4.77% Other
3.21% Google
2.11% Mozilla/4
1.05% Konqueror
0.70% Mozilla
0.50% MSIE 5.0
0.05% Opera My method works for at least 90% of my visitors so I'm pretty happy with that.
Reply
Paul
Jun 27 2006, 05:33 PM
Here's a good explanation of how to make a CSS ONLY image highlight effect: http://www.javascriptkit.com/dhtmltutors/cssimage.shtml
Reply
Recent Queries:--
how to make image highlighted when mouseover - 3.50 hr back. (1)
-
how to make an image highlight when you hover over it - 3.53 hr back. (1)
-
how do i make a highlighted link? - 8.09 hr back. (1)
-
highlight image on rollover - 11.26 hr back. (1)
-
how to highlight link image? - 16.61 hr back. (1)
-
javascript image highlight - 26.17 hr back. (1)
-
darken image rollover javascript opacity - 33.04 hr back. (1)
-
how to make high lighted over images - 34.98 hr back. (1)
-
image highlight css - 37.49 hr back. (1)
-
link image highlight - 52.64 hr back. (1)
-
javascript make image appear highlighted - 54.46 hr back. (1)
-
hot to make a mouseover link highlight - 55.49 hr back. (1)
-
"visual basic" highlight hover - 60.63 hr back. (1)
-
javascript highlight image howto - 63.65 hr back. (1)
Similar Topics
Keywords : make, image, highlight, s, mouseovered
- Background Image Swap Script
Change a Background Image based on clock time (15)
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....
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....
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....
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....
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....
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....
Roll-over Image Links With Css
No preloading of images (2) 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 lin....
Howto#1: Custom Bbcodes On Ipb
The inner workings of the CONSOLE & HIGHLIGHT Tags (0) Custom BBCodes for Forums -------------------------- Hi all, I came up with this article to share
what I learnt of designing Custom BBCodes for various forum softwares while trying to come up with
some useful one's for AstaHost. Most of you are by now familiar with the new ones like CONSOLE,
NOTE, TABL etc. which I introduced a few days back. So how do these BBCodes work ? And how does the
forum softwares parse them. BBCodes, as you know, usually takes a Text Stuff format. The
"Text Stuff" in the textual content on which you want your bbcode to work. I....
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.....
Looking for make, image, highlight, s, mouseovered
|
|
Searching Video's for make, image, highlight, s, mouseovered
|
advertisement
|
|
