|
JavaScript - Adding Mooflow To A Hover Image
On my website http://smstext.jigowatt.co.uk i have a menu which when you hover over certain parts popups with information.
I have designed a Mooflow document that I want to popup instead (i will design a different one for each section). I cant get it to show up when you hover? I am trying to add a php link in the javascript file that links the hover images. This is my code at the moment Code: var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=["http://i1189.photobucket.com/albums/z423/creativeedge1/Golf-Popup1.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[2]=["../dynamicindex14/winter.jpg"]
tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
When I am trying to link the php I use this code Code: var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=[<link href="<?php bloginfo('template_directory'); ?>/index2.php", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[2]=["../dynamicindex14/winter.jpg"]
tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
Obviously I am doing something wrong but I'm not sure what!?? Help Please Similar TutorialsHow can I add fadeIn and fadeOut with a duration that I can set/adjust to this javascript? The site is using Zencart and the the Image Hover effect comes from the Image Handler 2 Add-on. Thank you in advance for your help. Your time and attention in helping me with this is greatly appreciated. Here is a link to the site residing on a subdomain I use to build sites on http://test3.fullspecweb.com I read the "Read Before Posting" and it said to only post the code you are having trouble with, but I have no idea which section that would be so I apologize for being such a noob Here is the script from the jscript_imagehover.js file... Code: var offsetfrommouse=[20,20]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400; // maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet
// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;
var vpos;
//Detect IE
var stIsIE = /*@cc_on!@*/false;
//detect opera
var isOpera =
window.opera?1:0;
// Detect Webkit browsers
var isWebKit =
navigator.userAgent.indexOf("AppleWebKit") > -1;
if (document.getElementById || document.all){
document.write('<div id="trailimageid">');
document.write('</div>');
}
function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
} else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
} else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function gettrail(){
return new getObj("trailimageid");
}
function truebody(){
if (isWebKit){
return document.body;
}else if (isOpera) {
return document.documentElement;
}else{
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
}
function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
zoomimg_w=zoomimgwidth;
zoomimg_h=zoomimgheight;
if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
trailobj = gettrail().obj;
trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
trailobj.style.height=(zoomimgheight+(2*padding))+"px";
trailobj.setAttribute("startx", startx);
trailobj.setAttribute("starty", starty);
trailobj.setAttribute("startw", startw);
trailobj.setAttribute("starth", starth);
trailobj.setAttribute("imagename", imagename);
trailobj.setAttribute("imgtitle", title);
document.onmousemove=followmouse;
}
function hidetrail(){
trailstyle = gettrail().style;
trailstyle.visibility = "hidden";
document.onmousemove = "";
trailstyle.left = "-2000px";
trailstyle.top = "-2000px";
}
function followmouse(e){
var xcoord=offsetfrommouse[0];
var ycoord=offsetfrommouse[1];
if (stIsIE){
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
}
else
{
var docwidth=pageXOffset+window.innerWidth-15;
var docheight=Math.min(window.innerHeight);
}
var relativeX = null;
var relativeY = null;
if (typeof e != "undefined"){
if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
relativeX = e.layerX;
relativeY = e.layerY;
} else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
// relativeX = e.x; // original code replaced to work with Opera
// relativeY = e.y; // original code replaced to work with Opera
relativeX = event.offsetX;
relativeY = event.offsetX;
}
if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
} else {
xcoord += e.pageX;
}
if (docheight - e.pageY < zoomimg_h + (2 * padding)){
ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
// returning different values for ff and (opera and webkit) - fixed 12th june 2010
} else {
ycoord += e.pageY;
}
} else if (typeof window.event != "undefined"){ // Seems to be IE
if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
relativeX = event.x;
relativeY = event.y;
} else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
relativeX = event.offsetX;
relativeY = event.offsetY;
}
if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
} else {
xcoord += truebody().scrollLeft+event.clientX;
}
/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
var ie_offset = -20;
if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
/*
ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
*/
ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
} else {
ycoord += ie_offset + truebody().scrollTop + event.clientY;
}
}
trail = gettrail();
startx = trail.obj.getAttribute("startx");
starty = trail.obj.getAttribute("starty");
startw = trail.obj.getAttribute("startw");
starth = trail.obj.getAttribute("starth");
imagename = trail.obj.getAttribute("imagename");
title = trail.obj.getAttribute("imgtitle");
// calculate and set position BEFORE switching to visible
if (stIsIE){
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
}else{
var docwidth=pageXOffset+window.innerWidth-15;
var docheight=Math.max(document.body.offsetHeight, window.innerHeight);
}
if(ycoord < 0) { ycoord = ycoord*-1; }
if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
trail.style.left=xcoord+"px";
trail.style.top=ycoord+"px";
if (trail.style.visibility != "visible") {
if (((relativeX == null) || (relativeY == null)) ||
((relativeX >= startx) && (relativeX <= (startx + startw))
&& (relativeY >= starty) && (relativeY <= (starty + starth)))){
newHTML = '<div><h1>' + title + '</h1>';
newHTML = newHTML + '<img src="' + imagename + '"></div>';
trail.obj.innerHTML = newHTML;
trail.style.visibility="visible";
}
}
}
Good day all, I was hoping someone could help me out with the following. I currently have a slideshow that as thumbnails under a main image. The thumbnails slide left and right with hover on a button and with a click changes main image without any problems. Few things I am looking to change/add: 1. The ability to mouse over the main image and have the caption appear than disappear when the mouse is moved off. Currently I have the caption as a static text under the main image. 2. Start the thumbnail position in the middle instead of the left 3. Add mouseover buttons to the main image to give the ability to cycle through the images instead of having to always use the thumbnails. Below I've include the Javascript code: Is this the best way or is there a better way? Example of slideshow: http://neileverosborne.com/portfolios/manatees.html JAVASCRIPT: Code:
var displayWaitMessage=true; // Display a please wait message while images are loading?
var activeImage = false;
var imageGalleryLeftPos = false;
var imageGalleryWidth = false;
var imageGalleryObj = false;
var maxGalleryXPos = false;
var slideSpeed = 0;
var imageGalleryCaptions = new Array();
function startSlide(e)
{
if(document.all)e = event;
var id = this.id;
if(this.id=='arrow_right'){
slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = -1*slideSpeedMultiply;
slideSpeed = Math.max(-10,slideSpeed);
}else{
slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = 1*slideSpeedMultiply;
slideSpeed = Math.min(10,slideSpeed);
if(slideSpeed<0)slideSpeed=10;
}
}
function releaseSlide()
{
var id = this.id;
slideSpeed=0;
}
function gallerySlide()
{
if(slideSpeed!=0){
var leftPos = imageGalleryObj.offsetLeft;
leftPos = leftPos/1 + slideSpeed;
if(leftPos>maxGalleryXPos){
leftPos = maxGalleryXPos;
slideSpeed = 0;
}
if(leftPos<minGalleryXPos){
leftPos = minGalleryXPos;
slideSpeed=0;
}
imageGalleryObj.style.left = leftPos + 'px';
}
setTimeout('gallerySlide()',20);
}
function showImage()
{
if(activeImage){
activeImage.style.filter = 'alpha(opacity=50)';
activeImage.style.opacity = 0.5;
}
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
activeImage = this;
}
function initSlideShow()
{
document.getElementById('arrow_left').onmousemove = startSlide;
document.getElementById('arrow_left').onmouseout = releaseSlide;
document.getElementById('arrow_right').onmousemove = startSlide;
document.getElementById('arrow_right').onmouseout = releaseSlide;
imageGalleryObj = document.getElementById('theImages');
imageGalleryLeftPos = imageGalleryObj.offsetLeft;
var galleryContainer = document.getElementById('galleryContainer');
imageGalleryWidth = galleryContainer.offsetWidth - 20;
maxGalleryXPos = imageGalleryObj.offsetLeft;
minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
if (navigator.userAgent.indexOf('MSIE') >= 0) {
var arrowWidth = document.getElementById('arrow_left').offsetWidth;
var el = document.createElement('div');
el.style.position = 'absolute';
el.style.left = arrowWidth + 'px';
el.style.width = (galleryContainer.offsetWidth - arrowWidth * 2) + 'px';
el.style.overflow = 'hidden';
el.style.height = '100%';
document.getElementById('galleryContainer').appendChild(el);
el.appendChild(document.getElementById('theImages'));
}
var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
for(var no=0;no<slideshowImages.length;no++){
slideshowImages[no].onmouseover = showImage;
}
var divs = imageGalleryObj.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
}
gallerySlide();
}
function showPreview(imagePath,imageIndex){
var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
if(subImages.length==0){
var img = document.createElement('IMG');
document.getElementById('previewPane').appendChild(img);
}else img = subImages[0];
if(displayWaitMessage){
document.getElementById('waitMessage').style.display='inline';
}
document.getElementById('largeImageCaption').style.display='none';
img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
img.src = imagePath;
}
function hideWaitMessageAndShowCaption(imageIndex)
{
document.getElementById('waitMessage').style.display='none';
document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
document.getElementById('largeImageCaption').style.display='block';
}
window.onload = initSlideShow;
Hi everyone, Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc. My problem is: Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels. I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu. So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything. Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect. Thanks. ps i can post the js code if wanted Hi all I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded. Is there a way to either: * Use javascript to make it so the image only loads when the link is hovered over? or * Allow the rest of the javascript on the page to run before the images are finished loading? I think i'd prefer the first solution if possible but i'm open to all ideas. Thanks in advance! HI, I am looking to enlarge an image when its hovered over, can anyone give me the code for this? Thanks Hey, I want javascript to change the background image on hover. This is my javascript: Code: function navOver(obj){
var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat';
obj.style.background='imgUrl';
}
function navOut(obj){
var imgUrl = 'url(images/' + obj.id + '.png) center no-repeat';
obj.style.background='imgUrl';
}
and this is the HTML: Code: <li id="home" onmouseover="navOver(this)" onmouseout="navOut(this)"></li> This doesn't work, can anyone help me and say me what to do? Ok. Basically, I will have images, about 150x100 that are all different. They will be displayed on a page in groups of 4. I want to make it so that if you hover over them, another image of the same size is put on top of that with part alpha. To give you an idea of what I am doing, it will be like youtube videos when you hover over them except I want there to be an image centered. I know this part of the code, but I don't know what to put inside it: Code: $(document).ready(function(){
$("img").mouseenter(function(){
//add image on top of this image
})
$("img").mouseleave(function(){
//remove covering image
})
})
What should I replace the comments with? Thanks Right i need some help with some code, i have been trying 2 days to get it to work! basically the 3 image locations are in Variables in PHP $piclocation1 $piclocation2 $piclocation3 What i want is when you hover over the div class "breaking-news", i want the div ID "latest-news-image" to change to that specific image background. example the top "breaking-news" class is on hover and the image $piclocation1 should show in "latest-news-image". if the middle "breaking-news" class is on hover the image $piclocation2 should show in "latest-news-image". and so on if you could help me figure out a way around to get this to work i would be ever so greatfull, as i dont know if i got this in the right area as it would contain javascript, php and poss Css! and even if you could point me in the right direction would be helpful! this is the website page i am testing it on if you would like to look at if visually http://www.wolverhampton-wanderers.co.uk/text.php and here is the code: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Stylesheet" type="text/css" href="./wolves.css"/>
<title>Untitled Document</title>
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 1;
while($row1 = mysql_fetch_array($news)){
if($counter == 1)
{
$picture1 = $row1['imageID'];
$getimage1 = "SELECT * FROM news_images WHERE imageID = $picture1";
$image1 = mysql_query($getimage1) or die(mysql_error());
$pic1 = mysql_fetch_array($image1);
$piclocation1 = $pic1['imageFile'];
}
if($counter == 2)
{
$picture2 = $row1['imageID'];
$getimage2 = "SELECT * FROM news_images WHERE imageID = $picture2";
$image2 = mysql_query($getimage2) or die(mysql_error());
$pic2 = mysql_fetch_array($image2);
$piclocation2 = $pic2['imageFile'];
}
if($counter == 3)
{
$picture3 = $row1['imageID'];
$getimage3 = "SELECT * FROM news_images WHERE imageID = $picture3";
$image3 = mysql_query($getimage3) or die(mysql_error());
$pic3 = mysql_fetch_array($image3);
$piclocation3 = $pic3['imageFile'];
}
$counter = $counter + 1;
}
?>
</head>
<body>
<div class="shaddow"><!-- This is the shaddow behind the content -->
<div class="content"> <!-- This is the content and main background -->
<div class="header"><img src="../images/header.jpg"/></div>
<div class="menu">
<div id="nav">
<?php
$cat = "SELECT * FROM `top-menu` ORDER BY 'category' ASC";
$category = mysql_query($cat) or die(mysql_error());
$start = 1;
while($row = mysql_fetch_array($category)){
$submenu = $row['sub-menu'];
if($submenu == '1'){
echo "</li><li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a>";
}
elseif($submenu == '2'){
if($start == 1){
echo "<ul>";
}
echo "<li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a></li>";
$start = $start + 1;
if($submenu !='2'){
echo "</ul></li>";
$start = 1;
}
}
}
echo "</ul></li><a class='nav-end'></a>";
?>
</div>
</div>
<div id="latest-news">
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 0;
echo "<div id='latest-news-image'></div>" .
"<div id='latest-news-header'>Breaking News</div>";
while($row1 = mysql_fetch_array($news)){
echo "<div class='breaking-news'><div class='breaking-news-header'><a href='#'>{$row1['title']}</a></div>" .
"<div class='breaking-news-info'>Posted on {$row1['date']}, by {$row1['author']}</div>" .
"<div class='breaking-news-desc'>{$row1['desc']}</div>" .
"<div class='breaking-news-readmore'><a href='#'>Read More</a></div></div>";
$counter = $counter + 1;
}
?>
</div>
</div>
</div>
</body>
</html>
Hello, I was wondering if anyone could help me with a personal website I am modifying for a friend. He basically has a list of links such as: Home Blog Pictures Links What I want to do is that whenever you roll over, say, "Blog", an image appears to the right of the links (the image will be a small screenshot of what the blog looks like). When you roll over "Pictures", a different image appears in it's place. I already know how to do this when rolling over images, but not rolling over text. I used document.getElementById and just set the src to the image, but how do I do this when I just have text to roll over? Is it possible/recommended to use the follow JQuery? http://ajax.googleapis.com/ajax/libs.../jquery.min.js Thank you for your time ok I have this image and i want the image to change upon the mouse hovering over it. Which in it self is simple to do and I Google numerous different ways on how to do it. But each one i would be forced to use a <a href... in it. The thing is I don't want to use it cause i am already using HTML image map. I really need help on finding the code that would work... This is what I have Code: <html> <head> </head> <body> <p align="center"><img src="room.bmp" border="1" usemap="#maps" alt="Green room" /></p> <map name="maps"> <area shape="rect" coords="25,210,100,300" href="greenroom.html#energy" > <area shape="rect" coords="130,215,185,277" href="greenroom.html#water"> <area shape="rect" coords="80,11,263,149" href="greenroom.html#tv"> </map> ............. Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this: http://piscesmike.com/Pages/recipes/onions.html The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob! Dear all, I have been trying to replicate a cool javascript effect that appears here. See the funky images fading in when hovering with mouse? I want that ;-) By using Firebug I think I have narrowed down the code needed to: Code: <div id="main" class="clearafter">
<div class="inner clearafter">
<div class="columns clearafter">
<div class="project hovers column" style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);">
<a href="http://mountfolly.co.uk" class="image">
<img width="274" height="137" alt="project" src="/images/41_project.jpg" class="screenshot">
<img width="274" height="137" alt="project" src="/images/7_project.jpg" class="text" style="opacity: 0; display: inline;">
</a>
<h3>Text and titles etc...</h3>
<p>etc etc etc...</p>
</div>
<div style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);" class="project hovers column"></div>
</div>
</div>
</div>
<script type="text/javascript" src="/javascript/global.js"></script>
and this (which I put into a javascript file called global.js): Code: /* project listings */
// to deal with IEs opacity idiocy
$(function() {
$('.project.hovers .text').css({opacity: 0}).show();
$('.project.hovers').css({cursor: 'pointer'}).click(function() {
location.href = $('h3 > a', this).attr('href');
});
});
$('.project.hovers').hover(
function () {
$('.text',this).stop().fadeTo('100',1);
$(this).stop().animate({borderTopColor: '#E9E9E9', borderRightColor: '#E9E9E9', borderBottomColor: '#E9E9E9', borderLeftColor: '#E9E9E9', backgroundColor: '#EEE' }, 100)
},
function () {
$('.text',this).stop().fadeTo(1000,0);
$(this).stop().animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF', backgroundColor: '#FFF' }, 1000)
}
);
But when I re-create the files (index.html, global.js, and replacement images) all I get is this. No hover effect... Any ideas what is missing? Would appreciate some help. Thanks, Wysiwyger PS: If you fancy a laugh, check these out I have searched for information on this but so far no luck. site: http://www.brentpurton.com/TrueSteez go to the product page The problem: I have a set of images that have hover scrolling. The idea is that when you click on the thumbnail image at the bottom in the hover scroll area, a swap image behaviour will change the picture on the shirt. The real problem is that when I implement the swap image on the thumbnails and preveiw it. They no longer Hover Scroll, they just stay in 1 spot. They do however swap the image. here is what happens: http://www.brentpurton.com/TrueSteezSwap Any Help is apreciated. Thanks in advance hi, i want to write a js function which will change images (i have an array of images) on mouse over till the time i have my mouse over the image. i have written function: Code: function changeImage(testImage,source)
{
var my_array=testImage.split("||");
var actualLen = my_array.length - 2;
for (i=0;i<my_array.length;i++)
{
document.getElementById("lrgPic" + source).setAttribute("src",my_array[i]);
setTimeout('',1000);
if(i == ( my_array.length - 1 ))
{ // i = (( my_array.length - 1 ) - i) - 1; // alert(i);
}
}
}
but the action i want is: on hovering over the image (location: "lrgPic" in above code) images should keep on changing grabbing the location from array ("my_array" above) and the image change should happen after every sec. i have tried "setTimeout" function; but it's not working as desired. with the code which is commented above.. i want to reset the loop so that images are continuously changed till "onmouseOut" is performed... any clues guys.. how can i improve on this code? with this code.. my script goes in infinite loop.. please help thanks in advance trying to find a example of when you hover over a image, text appears on the bottom so it could be a picture of a dog, whne you put your mouse over it, text will show in the picture (ie* transparent background for text so it's readable) anywhre where I can find a example of this???? Hi all, I can't seem to add an onclick event to an image. I'm sure I am doing something wrong as I am very new to Javascript. This is a part of my javascript code that is in the head and body of my HTML file: Code: <head>
<script language="JavaScript">
.....
.....
var redLocation0 = redArray[0]+".jpg";
....
....
function redClick( buttonLocation ) {
window.location = "http://www.yahoo.com/"
}
....
....
</script>
</head>
<body>
<table>
<tr>
<td>
<script language="javascript">document.write('<IMG SRC="'+ redLocation0 +'">'); onclick="redClick('0')";</script>
</td>
</tr>
</table>
</body>
The image that is displayed is not clickable, and therefore the function redClick cannot be called. Can someone please help me and tell me where I am going wrong here. I am kinda new to JavaScript. Thanks! Figured this out (I think)
I'm having the same trouble with adding an ALT tag to the last image: var imageList = [ "images/banner/banner1.jpg", "images/banner/banner2.jpg", "images/banner/banner3.jpg", "images/banner/banner4.jpg", "images/banner/banner4.jpg", ]; Can anyone help? Hello Everyone, I need to add some sort of validation that will only allow users to upload .jpg files. I really need to add this to an existing script I've already written. I've seen scripts and tutorials that add the jpg validation but only incorporate the image field of the form. I need the script to validate several forms in the field, not just one. When I try to add validation for the jpg field to the follow script everything stops working. Can someone please point me in the right direction? Thanks! Code: <form id="uploadForm" method=post class="upload" action=submit_script.php enctype='multipart/form-data' onsubmit="return validate_form(this)"> <p><b>First Name</b><br/> <INPUT TYPE="TEXT" NAME="name_first" size="40"></p> <p><b>Last Name</b><br/> <INPUT TYPE="TEXT" NAME="name_last" size="40"></p> <p><b>School Name</b><br/> <INPUT TYPE="TEXT" NAME="name_school" size="40"></p> <p><b>Your School E-Mail</b><font class="super">1</font><br/> <INPUT TYPE="TEXT" NAME="school_email" size="40"></p> <p><b>Your File</b><font class="super">4,5</font><br/> <input id="userfile1" name="userfile1" type="file" size="30"></p> <p><input name="upload" type="submit" class="box" id="upload" value="Submit Your Poster" onClick="YAHOO.example.container.wait.show();"></p> </form> Code: function validate_required_field(field,alertText) {
with (field) {
if (value==null||value=="") {
YAHOO.example.container.wait.hide();
alert(alertText);
return false;
}
else {
return true;
}
}
}
function validate_email(field,alertText)
{
with (field) {
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2) {
YAHOO.example.container.wait.hide();
alert(alertText);
return false;
}
else {
return true;
}
}
}
function validate_form(thisform) {
with (thisform) {
if (validate_required_field(name_first,"Please enter a value in the 'First Name' field before continuing")==false) {
name_first.focus();
return false
}
}
with (thisform) {
if (validate_required_field(name_last,"Please enter a value in the 'Last Name' field before continuing")==false) {
name_last.focus();
return false
}
}
with (thisform) {
if (validate_required_field(name_school,"Please enter a value in the 'School Name' field before continuing")==false) {
name_school.focus();
return false
}
}
with (thisform) {
if (validate_required_field(school_email,"Please enter a value in the 'School Email' field before continuing")==false) {
school_email.focus();
return false
}
}
with (thisform) {
if (validate_email(school_email,"Please enter a valid email address before continuing")==false) {
school_email.focus();
return false
}
}
}
Hi, I am just about at wits end, and I am hoping someone here will be able to assist. I've searched and searched and have come close but to no avail. I found a nice image gallery code from "David's Kitchen" http://monc.se/kitchen/80/lightweigh...ith-thumbnails and have tweaked it to eactly what I wanted, however, I want to add an image caption of the alternate image text below the active picture. I've tried everything I could think of (with my limited knowledge) with no success. Any help would be GREATLY appreciated. Here is the code I have: Code: <html>
<head>
<style media="screen,projection" type="text/css">
/* begin gallery styling */
#jgal { list-style: none; width: 400px; position: relative; top: -12px; left: 40px; }
#jgal li { opacity: .5; float: left; display: block; width: 80px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { width: 80px; height: 60px; }
#jgal li.active img { display: block; float: left; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style>
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<script type="text/javascript"> document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal = {
init: function () {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement('img');
document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
li[0].className = 'active';
for (i = 0; i < li.length; i++) {
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i], 'mouseover', function () {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j = 0; j < im.length; j++) {
im[j].className = '';
}
this.className = 'active';
enlargedImg.src = this.getElementsByTagName('img')[0].src;
});
}
},
addEvent: function (obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e" + type + fn] = fn;
obj[type + fn] = function () { obj["e" + type + fn](window.event); }
obj.attachEvent("on" + type, obj[type + fn]);
}
}
}
gal.addEvent(window, 'load', function () {
gal.init();
});
</script>
</head>
<body>
<ul id="gallery">
<li><a href="/bmfsweb/esg/image/Vactor Images2/industrial.htm" rel="nofollow" target="_blank"><img src="/bmfsweb/esg/image/Vactor Images2/2100_PLUS_PD_400w.jpg" alt="2100 Plus PD"></a></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2100_Plus_Fan_400w.JPG" alt="2100 Plus Fan"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2103_400w.jpg" alt="2103"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/F_Series_400w.jpg" alt="Front Hose Reel Jetter"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/Jetter_shrouded_400w.JPG" alt="Rear Hose Reel Jetter"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2100_PD_400w.JPG" alt="2100 Classic PD"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2100_fan_400w.JPG" alt="2100 Classic Fan"></li>
</ul>
</body>
</html>
Again, any help is greatly appreciated. Thanks, Ben. |
|||||||