HTML - Group Of Hover Over Images + Javascript Lightbox
I'm about to try and code this page. Basically, it is a group of of linked images. I want to have the images open in lightbox 2.0 but I also want them to have a roll over element.
I know both features require javascript, so can they both work together? (stupid question?) I know the scripts have to go in the head of the page. Lets say the images are as follows work1_off.jpg work1_on.jpg work2_off.jpg work2_on.jpg work3_off.jpg work3_on.jpg work4_off.jpg work4_on.jpg work5_off.jpg work5_on.jpg work6_off.jpg work6_on.jpg work7_off.jpg work7_on.jpg work8_off.jpg work8_on.jpg work9_off.jpg work9_on.jpg what might the tags look like? Similar TutorialsI have a table with 5 images in one row. In 4 of them the four images are of words for a navigation bar. Each word is black and right below it is the same word in color. When the mouse hovers over the four words I would like the image to raise up so that the colored words are shown. Here is what I have so far: Code: <table> <tr> <td><a href="" target="_new"><img src="menu/Logo.png" width="139" height="155" alt="Back to home page" border="0"></a></td> <td><a href="" target="_new"><img src="menu/Drafting.png" width="98" height="65" alt="Drafting" border="0"></a></td> <td><a href="" target="_new"><img src="menu/Programming.png" width="157" height="65" alt="Programming" border="0"></a></td> <td><a href="" target="_new"><img src="menu/Resume.png" width="93" height="65" alt="Resume" border="0"></a></td> <td><a href="" target="_new"><img src="menu/Contact.png" width="96" height="65" alt="Contact" border="0"></a></td> </tr> </table> Is it possible to move the images like this or do I need to use a background image instead? ok so I found this code online: HTML Code: <div class="one"><a class=one-link href="http://benjaminpotter.org"><span class=one-span onmouseover="if (window.Station) { Station.run(this, 'opacity', {from:Station.read(this, 'opacity') || 0, to: 1, time: 300, f: Interpolators.sineCurve}); }" onmouseout="if (window.Station) Station.run(this, 'opacity', {from:Number(Station.read(this, 'opacity')) || 1, to: 0, time: 300, f: Station.f.inversion(Interpolators.sineCurve)})" ></span></a></div> </div> can someone help me understand it and potentially get it to work? I'm looking for a lightbox type script that can show an external .html (iframe) on my page. I saw it a while back while I searching for scripts but I can't find it anymore, and I wasn't if it was reliable or not. What I want it to do: Click on a picture or link Opens up a lightbox on top of the Website, but instead of an image it will be an iframe displaying a contact form. Thanks! Hey folks - Everywhere I've read states that if I give a series of checkboxes the same name, then upon hitting submit, I will get a comma separated list of the values. But, that just isn't working for me. I have this code : Code: <html><body> <form method="get"> <input name="input" size="30" maxlength="100" id="searchbox" value="test" /><br /> <input type="checkbox" name="referBy" value="td"/> Test driven a vehicle<br/> <input type="checkbox" name="referBy" value="dlr"/> Visited an autotmotive dealer<br/> <input type="checkbox" name="referBy" value="veh"/> Purchased/Leased a vehicle<br/> <input type="checkbox" name="referBy" value="ins"/> Purchased automobile insurance<br/> <input type="submit" value="Submit"/> </form> </body> </html> But, it results in this for the URL - ...../s_r2.htm?input=test&referBy=td&referBy=dlr Any thoughts Maybe I'm missing a step or a setting Syl Hi All! I'm using the Option Group/ optgroup/ Select features within a form and would like to initially display all options without having to click the arrow button to "reveal" the selections. I can't seem to find the option to allow this. Of course I can switch to a hyperlinked list, but have made extensive Option Group and would like to continue to use them. Thanks in advance!! How do I put an image on a Yahoo group home page and make it go all the way across the screen? What`s the html code to do this? Hi I have a web form that, on submission populates a mySQL database through PHP. Each question on the form can have up to 5 different answers. What I am trying to achieve, either through radio groups or drop-down menus is to have unique values for each number so effectively ranking them. Example: Rank your favourite colours from these: Red [1][2][3][4][5] Blue [1][2][3][4][5] Green [1][2][3][4][5] White [1][2][3][4][5] Orange [1][2][3][4][5] Now for each one, I only want the user to select a UNIQUE value so that the same two numbers cannot be submitted. On submission there must be a 1,2,3,4 & 5 (ie with no two questions having the same number) Scratching my head on this one. Any help would be most welcome. Thanks hi i have a group of radio buttons generated dynamically and i want to disable user changing his choice after selecting one! i want to disable the group of radios or lock the first choice somehow! apologize me for my poor eng! tanx So I have a radio group within a form. Specifically, here is my code: HTML Code: <table> <tr> <td><label> <input type="radio" name="question_1" value="Average" id="question_1_0" /> Average</label></td> <td><label> <input type="radio" name="question_1" value="Large" id="question_1_1" /> Large</label></td> <td><label> <input type="radio" name="question_1" value="Gigantic" id="question_1_2" /> Gigantic!</label></td> <td><label> <input type="radio" name="question_1" value="Getting_larger" id="question_1_3" /> It's Getting Larger...</label></td> </tr> </table> So I need to set an initially selected on this radio group. How do I do that? Thanks! Hi, I am working in Web Application Designer in SAP and it uses XHTML as the language for creating the web items. I have a toggle button which I am able to link with a web item and use the show/hide option. Can any one tell me if I can include another web item to the same toggle button and use it to hide both the Analysis items? <bi:BUTTON_GROUP_ITEM name="BUTTON_GROUP_ITEM_1" designheight="70" designwidth="300" > <bi:BUTTON_LIST type="ORDEREDLIST" > <bi:BUTTON type="COMPOSITE" index="1" > <bi:CAPTION value="Show value" /> <bi:ACTION type="CHOICE" value="INSTRUCTION" > <bi:INSTRUCTION > <bi:SET_ITEM_PARAMETERS > <bi:cmd_item_parameters type="TEXT_ITEM" > <bi:VISIBILITY value="VISIBLE" /> </bi:cmd_item_parameters> <bi:TARGET_ITEM_REF value="TEXT_ITEM_1" /> </bi:SET_ITEM_PARAMETERS> </bi:INSTRUCTION> </bi:ACTION> </bi:BUTTON> I want to add <bi:cmd_item_parameters type="ANALYSIS_ITEM" > <bi:VISIBILITY value="VISIBLE" /> </bi:cmd_item_parameters> <bi:TARGET_ITEM_REF value="ANALYSIS_ITEM_1" /> To the same Button group. Any insight into how I should combine the instructions to the same button group? Hi, I have a load of images I want to appear in a series of lightboxes that look like the attached file. Ignore the blur latin. I just want the red text and to be able to click prev<->next to rotate the images. What do you think the best way to achieve this would be. I have looked at a few lightbox scripts but non will let be format the text the way I need. I am not to worried about the prev/next so long as they are there and the red text does not change so was thinking a HTML template in the lightbox that has the smarts to switch the images when prev/next is clicked. Any ideas welcomed. Cheers, Kevin. I am trying to modify the behaviour of an existing html page to use the Lightbox utility rather than opening a new browser window. The trouble is, no matter where in the source code I place the the Lightbox references ie: <link rel="stylesheet" href="lightbox.css" type="text/css" /> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="lightbox.js"></script> the function does not work. It also stops the behaviour of the sliding tabs. Would some mind taking a look at the attached html and advising me where Im going wrong. p.s. I have tried the lightbox utility in a new page thus: <html> <link rel="stylesheet" href="lightbox.css" type="text/css" /> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="lightbox.js"></script> <body> <a href="pulrosetest.jpg" rel="lightbox"> <img src="pulrose.jpg"> </body> </html> and it works fine. Thanks, Steve Hi, I want to develop a webpage where I can display the images using LightBox.My question is how to use Lighbox plugin to make that happen.I have not used any tool(Dreamweaver) to design the webpage.I wrote HTML in the notepad. Any help is greatly appriciated. Thanks in advance. I am trying to edit a website. The lightbox images on this page (after popping up) have the "X" and "Close" with the popup: http://www.ryekids.com/patients/treatments/care.php But for the life of me, I cannot get that "X" & "Close" on the office staff lightbox images on this other page: http://www.ryekids.com/office/staff.php Any pointers? Thanks in advance for your help and advice! Hello everybody. I was wondering if you could help. Firstly I'm a noob to css/html. I've come stuck. I've created a site in illustrator imported into dreamweaver (I know this isn't the right way but it's easier for me at the moment, sort of) and added lightbox 2 to it. It's been smooth sailing and lightbox works great. This is the code I see: (note I've just put the code for the image I want to use) <div align="center"><a href="images/locogsequins copy.jpg"rel="lightbox"><img src="images/index_03.jpg" width="262" height="188" Messy I know , but it's working for me so far. However, on top of having the lightbox effect I would like to add a rollover effect. So when a viewer lands on the page they will see everything in black and white, when they roll over an image it turns to colour. The code I've found is <div><img src="images/locogsequins_bw.jpg" onmouseover="this.src='images/locogsequins copy.jpg'" onmouseout="this.src='images/locogsequins_bw.jpg'"> which works. (I've tested via preview in DW) My question is where do I insert this into the earlier code so they work together? I'd very grateful for any help. Thanks x Hi I'm not sure if I am posting this in the correct forums, so I'm sorry. I'm trying to setup Lightbox v2.0 fro www.huddletogether.com/projects/lightbox2 on my site however for some reason it doesn't work, I think I'm doing something wrong, so could please someone give me a detailed tutorial on how to set it up. Thank you Does anyone know why lightbox images would be displaying in reverse order? The numbers are correct but it pops up on the last one and I have to hit previous to get to the front. Hi my lightbox works partially on my website. i've loaded the lightbox on this image <a rel="lightbox" href="http://visualadvice.com/wp-content/uploads/2008/10/happiness_101.jpg"> and simply activated the plug in, in my manager. I didn't add the JS and CSS links at the top of my header in my word press template. on this link it works fine! http://visualadvice.com/?p=271 But on my main page it doesnt work http://visualadvice.com/ so i looked up the code and i saw that the JS and the CSS file links were missing from the main page. so i went on my theme editor and put the link in the header but then where it used to work properly. http://visualadvice.com/?p=271 it had a huge black square at the top. so i looked up the code and the JS and CSS file links were duplicated. and where it didnt work. worked fine http://visualadvice.com/ what i want to know is how to delete the links that are automatically set up, so i can just put one set of links in my header. ive looked up at the plugin editor, would it have to do anything with this code?? function lightbox_wp_head() { global $lightboxpluginpath, $post; $lightboxcolor1 = get_option("lightbox_color1"); $lightboxlb_opacity = get_option("lightbox_lb_opacity"); $lightboxlb_resize = get_option("lightbox_lb_resize"); $lightboxoff = false; $lightboxoffmeta = get_post_meta($post->ID,'lightboxoff',true); if ($lightboxoffmeta == "false") { echo '<script type="text/javascript"> lb_path = "' . $lightboxpluginpath . 'lightbox/"; lb_opacity= "' . $lightboxlb_opacity . '"; lb_resize= "' . $lightboxlb_resize . '";</script>'."\n"; echo '<link rel="stylesheet" type="text/css" media="screen" href="' . $lightboxpluginpath . 'lightbox/css/lightbox.css" />'."\n"; echo '<script type="text/javascript" src="' . $lightboxpluginpath . 'lightbox/js/prototype.js" ></script>'."\n"; echo '<script type="text/javascript" src="' . $lightboxpluginpath . 'lightbox/js/scriptaculous.js?load=effects,builder"></script>'."\n"; echo '<script type="text/javascript" src="' . $lightboxpluginpath . 'lightbox/js/lightbox.js"></script>'."\n"; echo '<style type="text/css">#overlay {background-color:' . $lightboxcolor1 . ';}</style>'."\n"; } } I posted on their support forums but help seems to be thin around there, so I thought I'd give here a try....anybody have any ideas? thanks julien I am trying to figure out what code goes where (and how much of it, etc!), to add "lightboxes" to my images on my site. The desired "lightbox" effect can be seen when you click the images here- http://shop.vintageacademe.com/produ...r-satin-jacket And I want to add it to my site's images rather than having the viewer directed to a new page, example of my page seen here- http://decadence-fashion.co.uk/item3286.html I have some html knowledge, as my website is under construction, and really am hoping to add the lightbox system to all the pages! Please help! Thank You Can anybody point me in the right direction of finding a page that has some info on lightbox manipulation?? Or if by chance you know how to change the top margin value? As when the lightbox loads, it's way to far from the top of the page, like 200pixels as the default (as I haven't found how/where to change this). THANK YOU!! |