images
You are browsing the images tag archive.
Shakey Images
This code will make an image shake when you hover over it with your mouse.
Place this into the head of your webpage:
<style>
.shakeimage{
position:relative
}
</style>
<script language=”JavaScript1.2″>
/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100’s more DHTML scripts, visit http://dynamicdrive.com
*/
//configure shake degree (where larger # equals greater shake)
var rector=3
///////DONE EDITTING///////////
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout(”rattleimage()”,50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>
Place this where you want your shakable image to appear and replace the image url to that of your own:
<img src=”http://www.yourdomain.com/imagepath/imagename” class=”shakeimage” onMouseover=”init(this);rattleimage()” onMouseout=”stoprattle(this);top.focus()” onClick=”top.focus()”>
No Right Click On Images Only
Don’t want visitors to be able to right click on your images?
Paste this into the head of your webpage:
<script language=”JavaScript1.2″>
/*
Disable right click script II (on images)- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
var clickmessage=”Right click disabled on images!”
function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName==”IMG”){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName==”IMG”){
alert(clickmessage)
return false
}
}
}
function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}
if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
</script>
Highlight Image
This script will turn your image to grey and then when you hover over it with your cursor it will turn back to it’s color.
Place this code into the head of your page:
<script language=”JavaScript1.2″>
//Gradual-Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
function high(which2){
theobject=which2
highlighting=setInterval(”highlightit(theobject)”,50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=30
}
function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
Use this code to link up your images. Just change the domain to your’s and the file name to that of your image [...]
Drag Images
This code works great for puzzles or image makers.
Place this in the head of your page:
<style>
<!–
.drag{position:relative;cursor:hand}
–>
</style>
<script language=”JavaScript1.2″>
<!–
//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com
var ie=document.all
var ns6=document.getElementById&&!document.all
var dragapproved=false
var z,x,y
function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}
function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? “HTML” : “BODY”
while (firedobj.tagName!=topelement&&firedobj.className!=”drag”){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.className==”drag”){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function(”dragapproved=false”)
//–>
</script>
Use this code to link your images you would like to [...]
Prevent Direct Linking
Want to prevent direct linking to your files? Sick of people linking to files that you feel should only be accessed from your website and not their’s? Read on…
Open your notepad.
Insert the follow code as it is displayed and change “mydomain.com” to your own domain name:
Code:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://mydomain.com/.*$ [NC]
RewriteCond [...]
Fading Image - Javascript
You’ve likely seen this on other websites where the images appear to be faded out and when you move your mouse over them their appear normal. This little javascript does just that.
Copy this code into your <head>Head Tags</head> in your HTML document:
Code:
<script language=”JavaScript1.2″>
function high(which2){
theobject=which2
highlighting=setInterval(”highlightit(theobject)”,50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else [...]
Randomize Your Button Friends
Got alot of friends you link to? Want to randomize their small buttons? You can randomize anything really with this script. Check it out… Have some fun!
Code:
<?
$Buttons = 5; // # of button to show
$Img[] = “<a href=’http://www.friend1.com’><IMG src=’images/1.gif’></a>”;
$Img[] = “<a href=’http://www.friend2.com’><IMG src=’images/2.gif’></a>”;
$Img[] = “<a href=’http://www.friend3.com’><IMG src=’images/3.gif’></a>”;
//over and over like [...]
Keep Your Site Looking Fresh With Rotating Images
1.) You will need 6 graphics that are preferably the same size.
2.) Upload those images to a directory on your website.
3.) Place this piece of code below your opening body tag:
Code:
<script language=”JavaScript” type=”text/javascript”>
// This script is free to use
<!–
// JavaScript to interpolate random images into a page.
var ic = 6; [...]
Image Fireworks
To create image fireworks you will need to create 10 tiny pictures first. Below, we will show you how to use those 10 tiny pictures as a fireworks display. Any time someone clicks anywhere inside your webpage, the 10 tiny images will look like a fireworks display scene. Cool, eh?
First, copy and paste this between [...]
Image Tips - For your webpages
When including images on your Web pages, there are a few rules you should follow to enhance the experience for your visitor. Use the following as a kind of checklist for placing images in your pages.
- Define widths and heights: Make sure you specify width and height attributes in your image tags. This gives the [...]
