Image Gallery - Add OnClick To OnMouseover?
Feb 10, 2011
I started with an Image Gallery javascript (from Jeremy Keith) in order to have an onMouseover effect for a menu, at the client's request--they wanted small moused-over pics in the menu to prompt a larger version of the photo in another column. Works great. But the href in the code, when clicked, currently links to the larger img opening in a new window. I want to add an onClick so that the user is taken to another page.
Here's the JS:
function showPic(whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}return false;
} else {
return true;
}}
var previousToggle=null;
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block";
if(previousToggle)previousToggle.style.display="none";
previousToggle=e;
} return true;
}
And here's the code:
<a onMouseover="toggleMe('para1'); showPic(this); return false;" href="images/commercial_600.jpg" title="abcdefg">
<img src="images/pix_smaller3.jpg" style="float:left" width="70" height="70"></a>
View 3 Replies
ADVERTISEMENT
Jun 30, 2011
how to make the following two simple image galleries:This one displays a specific image when its link is clicked ((URL address blocked: See forum rules)/tests/gallerysimp.html) And this one displays the previous/next image for whatever's showing ((URL address blocked: See forum rules)/tests/prevnext.html). (During its code, it points to this .js file ((URL address blocked: See forum rules) /tests/ nextPrevious.js).)
My question is, how do I combine those two galleries? How can I make one gallery that contains both kinds of links? Since the two galleries were copied from different places, the names they use aren't the same, and I'm not sure what to change to make it all unified. (I tried fiddling with it for over an hour before giving up.)
View 12 Replies
View Related
Feb 2, 2010
I want to have a big image and say 5 small thumbnails underneath. When the user clicks a thumbnail, the image loads where the previous big image was. Is there a standard way to do this?
View 3 Replies
View Related
Jul 16, 2006
I'm using a simple script that moves a DIV from one location to another when the user mouses over it. The problem is, I want the user to have to click the div for it to move and then click it agin to move it back. I've been trying to find a simple solution without luck. Code:
View 2 Replies
View Related
Jul 13, 2011
I am just starting out trying to learn javascript and I am looking for a good forum to help me get through all the roadblocks I'm sure to hit.
Right now I'm going through a tutorial series at webmonkey. Here is the lesson I am currently working on:[URL]... At the bottom of the page they give you a homework assignment which is to re-create this page using html and javascript. This page has 2 row frames. I re-created these frames and the top frame initially has a page called "navigation" loaded and the bottom page initially has a page called "explorer" loaded. If you click the monkey image at the right in the "navigation" frame, it opens a new page called "brand" in the bottom frame. This "brand" page has the same monkey image as the "navigation" page but unlike the other monkey image, this one changes when you mouseover it. If you mouseover it again, it changes to another image, and a third mouseover brings you back to the original monkey image. If you click on one of the images, it swaps the monkey image in the "navigation" frame with that image. The idea is that you have 3 images to chose from in the "brand" page that you can designate as the logo in the "navigation" page. I have no problem re-creating this effect. Here is the code I used to re-create this:
[Code]...
View 14 Replies
View Related
Apr 1, 2006
In a web page I have a div tag that has a onlick event registered
through the event listener. However, that same div tag also has a
onmousedown - start a drag and drop script
The problem I am having is that once the drag and drop is complete, the
mouse button is released and the onclick event is firing. I've tried
returning false from the function dealing with the mouse up and
cancelling the event with if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
but the onclick is still firing....
View 2 Replies
View Related
Dec 20, 2006
First off, I know very little javascript. I was wondering how to make a button (an image acting as a link instead of text) impression when the user goes over it and when the user clicks it.
View 4 Replies
View Related
Jan 4, 2012
I have my own wedding website that I created, but since ios updated to version 5 it no longer functions as it should on iPhone/iPad.[code]...
View 4 Replies
View Related
Apr 25, 2011
This is probably very simple but I really cant find the answer. I have a text box, and I am wanting the same mouseover and onclick functionality as Money Supermarket; [URL]... When I rollover the text box/table row then I want the area to display one colour and when I roll off then it goes back to normal. However, when I click on it I also want it to display the colour and remain that way until I click another element. How do I achieve this?
View 1 Replies
View Related
Jan 2, 2010
thinking about implementing some accordion menus. Want to use the latest code. Is this modern code on this site [URL] also, anyone have a link to any modern code for onmouseover instead of onclick navigation through accordion menus?
View 6 Replies
View Related
Feb 4, 2011
I use mostly PHP with my office's website as it usually requires some interaction with the server. However, i would like to do something that does not,and figured JS should be able to take care of it.What i would like to do seems rather simple:I have a calendar. I would it to do one of two things:
1. Using onclick, when the user clicks on a date, i would like it to print something underneath the calendar. Similar to an error message that shows up on a login form if you type something wrong in a field using PHP (if(isset($whatever))).
2. Or using onMouseover, if the user hovers over a date that i have something special scheduled, i want a message to either pop up (alert()) or similar to #1, show up below the calendar.
While fiddling with it this afternoon i figured i was close, but i am missing something...
<td><a href="#" onclick="document.getElementById("27").innerHTML='President's Day'; return false;">27</a></td>
But this seems to be pulling information from an element whose id = 27...which is not what i'd like..
View 4 Replies
View Related
Oct 22, 2010
I'm having a problem with .attr(). I will explain it whith code.I have this HTML code:
<p id="textoMarca0" onmouseover="muestraDialog('textoMarca0');">
this is an example paragraph
</p>
[code]....
So now the onmouseover has again its value [the original one, copied by doing an alert($("#"+elem+i).attr('onmouseover')) when i disable the onmouseover event], but it doesn't work
View 4 Replies
View Related
Oct 14, 2009
I am trying to incorporate Lightbox2's image gallery script into my site but I'm having difficulty.Here's where I'm accessing the script from: http:[url]....
The image thumbs are showing up but the larger images are not. I changed the 'body onload' html tag to window.onload as I'm using two different javascripts on this page and I don't want them to conflict.I've also added initLightbox() so I don't know what's wrong! Is there just an issue with the images or is there something wrong with the script.
<script type="text/javascript">
window.onload = function(){ // use this instead of <body onload …>
MM_preloadImages(MM_preloadImages('../3websites/home4.jpg','../3websites/amenities1.jpg','../3websites/inquiry1.jpg','../3websites/rates1.jpg','../3websites/photos1.jpg'); initLightbox()")
}
</script>
View 2 Replies
View Related
Feb 13, 2011
I'm looking for a very simple image gallery solution (no lightbox or something other fance) with a large image and a x amount of thumbnails at one off the sides, where the big image change whenever another thumbnail is clicked, without page refresh. ( a fade transition would be nice)!Which Plugin, preferably as light as possible, is the most suitable for this task?
View 3 Replies
View Related
Feb 19, 2011
I have the basic image gallery set up for thumbnails to populate a larger image... i uploaded it quick, take a look: [url]
Only thing i need to do is make the next and back buttons work...i know its something simple im missing if you bring up the firebug console i have several console logs on the next button.
View 6 Replies
View Related
May 17, 2011
I am brand new to JQuery but love it already. I have a couple of questions about a image effect I have found on a site and have used in my website. I found it herehttp://www.htmldrive.net/items/show/136/Image-Preview-Gallery and you can see how I am using it [URL]... The problem I have is. Is there anyway to add a per-loader into the jquery while theimage loads as the images I am using are larger then what the person that made used and the images are taking a little while to load. and also when you click the image it takes you to a new page with just the image on it is there a way to stop it from doing that?
View 9 Replies
View Related
Jun 2, 2009
I'm looking for a jQuery plugin, which could create a flyout of a container from left or right side of a page on some event (onClick or onMouseOver).
The example can be found at [URL] when the page loads some shopping ads slide from the left side of the browser screen (it's shown automatically only once, to see it again you need to delete this website cookies and reload the page - it would be great if the plugin had this cookie-based feature).
View 2 Replies
View Related
Jun 26, 2009
Im trying to enlarge an image using onmouseover but im trying to keep the image in the same central position eg. The image increases in size from the middle out rather than the top left corner staying in the same position (as in my code). An onmouseout setting the image back to the original size.
[Code]...
View 3 Replies
View Related
Jun 7, 2005
I made this neat little script to make a rollover image on an image map:
<head>
<script>
var clipNums=new Array(21,81,95,155,170,230,243,317);
function positionMap() {
document.getElementById('over').style.left = document.getElementById('off').offsetLeft;
document.getElementById('over').style.top = document.getElementById('off').offsetTop;
}
function imgRoll(i){
document.getElementById('over').style.clip="rect(0 "+clipNums[i]+" 19 "+clipNums[i-1]+")";
document.getElementById('over').style.visibility='visible'
}
function imgOut(){
document.getElementById('over').style.visibility='hidden'
}
</script>
<style>
#over{position:absolute;visibility:hidden;z-index:10;}
</style>
</head>
<body onload="positionMap();" onresize="positionMap();">
<map name="a">
<area shape="rect" coords="21,0,81,19" href="#" onmouseover="sh(1);" onmouseout="mo();">
<area shape="rect" coords="95,0,155,19" href="#" id="mnu1" onmouseover="imgRoll(3);" onmouseout="imgOut();">
<area shape="rect" coords="170,0,230,19" href="#" id="mnu2" onmouseover="imgRoll(5);" onmouseout="imgOut();">
<area shape="rect" coords="243,0,317,19" href="#" id="mnu3" onmouseover="imgRoll(7);" onmouseout="imgOut();">
</map>
<img src="/link_imgmap_on.gif" id="over" usemap="#a" border="0" width="322" height="19">
<img src="/link_imgmap.gif" id="off" usemap="#a" border="0" width="322" height="19">
</body>
View 2 Replies
View Related
Jul 23, 2005
is it possible to change the bg-Image of a <td>-tag onMouseOver?
maybe with javaScript or with css?
View 1 Replies
View Related
Jan 7, 2011
This is my script
And this is the function
The problem is when i mouseover the image look like this [url]
View 5 Replies
View Related
Oct 13, 2004
<script type="text/javascript">
function mirage(toggle, el_id)
{
var el;
if (!document.getElementById) return false;
var el = document.getElementById(el_id);
if(toggle=="on") {
el.style.background = "transparent url(graphics/"+el_id+"_hover.png) no-repeat";
} else {
el.style.background = "transparent url(graphics/"+el_id+".png) no-repeat";
}}</script>
What I have is a link and an image. When I hover over the link I'd like the image to change.
<a href="index.html" title="Home" onmouseover="javascript:mirage('on','home');">Home</a></li>
<div id="navigation">
<ul>
<li><a href="index.html" title="Home" id="home"> </a></li>
</ul> </div>
Now when I hover over the link the (background-) image of the link does not change. I also have this in the css..that when I hover over the image it changes and there it works just fine.
View 1 Replies
View Related
Feb 12, 2011
Here is what I am trying to do and I need some help with the code. I want to have a group of thumbnail images on an HTML page, when the visitor onmouseover a thumbnail I want a larger image of the thumbnail to display in a larger floating box beside each thumbnail. I really don't want any borders or titles on the floating boxes - clean box. Also onmouseout the larger floating box will hide.
View 2 Replies
View Related
Mar 14, 2005
Is javascript suitable for a decent image gallery? I've probably got around 200 photos at the moment, increasing every week.
I've been using JAlbum to create galleries but I'm sick of having hundreds of HTML files (one for each image). I want the thumbnails on the same page as the large image, not all of them, just about 10 or so. That way I'd have 20 pages instead of 200.
Do all of the large images have to be loaded when the page loads or just when the thumbnail is clicked?
View 1 Replies
View Related
Mar 11, 2007
My onmousevent fails to switch the large photo with one of the smaller
images. Code:
View 3 Replies
View Related
Sep 25, 2011
Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category.
So lets say I have a menu that looks like this:
<img src="notactiveimagemenu1.jpg" alt="">
<ul id="menu1">
<li>link</li>
<li>link</li>
[Code]....
I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution. And I think I should be able to use document.getElementById(id).onmouseover = function() for that.
note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript.
View 3 Replies
View Related