473,671 Members | 2,442 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Hyperlink to display img onMouseover?

9 New Member
Hi guys!

I'm working in PHPBB 3.0.2 and I'd like to create a BB Code that gives one thumbnail image on mouseover and the larger version in a popup window like Lightbox 2, Ajax, or the likes.

It's a linux server.

Thanks for the help!

-Free

Edit: At some point in the future, it would be nice if, when clicked, the image appears on one side and any updated text information can appear on the other side. Much of the pictures' corresponding information changes quarterly and we would like to be able to keep up with it. Thanks again!
Jul 14 '08 #1
16 5590
hsriat
1,654 Recognized Expert Top Contributor
Why don't you use the lightbox itself?
Jul 14 '08 #2
FreeSlagg
9 New Member
The following goes inside the header on a normal webpage. Which file and directory do I put this in?
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>
This part goes in the existing stylesheet, but where do I find the stylesheet? We've got ten or twelve different styles - I hope I do not need to edit each style. (If so, I expect it would be simplest to make an include statement in each and point to one file. Within that one file write all the includes and necessary directory information for the Lightbox 2 files)
Expand|Select|Wrap|Line Numbers
  1. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Also, I believe this is the code to Lightbox the file:
Expand|Select|Wrap|Line Numbers
  1. <a href="images/{SIMPLETEXT1}.jpg" rel="lightbox[{SIMPLETEXT2}]">{SIMPLETEXT1}</a>
I don't mind editing the code to get what I want (lack of next and previous arrows, etc), but this is my first foray into anything SQLish. I feel quite lost on where to put the files and what exactly my point of reference is for the directories.

Also, it appears to me many of the files I would normally edit are missing or hidden. I believe I have full access within my FTP client, so I think they're simply not there.
Jul 14 '08 #3
hsriat
1,654 Recognized Expert Top Contributor
I suppose this should be working, as you are doing exactly as what told by the creator of that lightbox in that how to use page. What's the problem now?
Jul 15 '08 #4
FreeSlagg
9 New Member
I suppose this should be working, as you are doing exactly as what told by the creator of that lightbox in that how to use page. What's the problem now?
Yeah, I get *what* I'm supposed to do, but I don't understand *where* these inserts need to go.
Jul 15 '08 #5
hsriat
1,654 Recognized Expert Top Contributor
Yeah, I get *what* I'm supposed to do, but I don't understand *where* these inserts need to go.
First three need to be inside the head tag, and the hyperlink needs to be where your image is (inside the body tag).
Jul 15 '08 #6
FreeSlagg
9 New Member
First three need to be inside the head tag, and the hyperlink needs to be where your image is (inside the body tag).
Of which file though? I'm working in a PHPBB forum. I don't have a simple webpage that I can edit those lines in.

Here's a picture to help clarify.

Jul 15 '08 #7
hsriat
1,654 Recognized Expert Top Contributor
make a 'js' and a 'css' folder in your root folder and place the js files and css files in them respectively.
Jul 16 '08 #8
FreeSlagg
9 New Member
Ok, I tried adding the following to the overall_header. html of the forum style I'm using.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>
And then I appended the code from the Lightbox CSS to the style's own CSS file.

In the BBCode I put the following (customized for the website)

BB Code:
Expand|Select|Wrap|Line Numbers
  1. [lightbox2]{TEXT}[/lightbox2]
HTML Replacement Code:
Expand|Select|Wrap|Line Numbers
  1. <a href="http://www.website.com/pics/{TEXT}.jpg" rel="lightbox[set]" title="{TEXT}">{TEXT}</a>

Now when I post [lightbox2]sample[/lightbox2] it gives me the sample.jpg in a whole different page.

I suspect the root of this is addressed on Lightbox's Support page where it states

Expand|Select|Wrap|Line Numbers
  1. It doesn't work at all. The image opens up in a new page. What's wrong?
  2.     This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:
  3.     <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
  4.     A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
  5.     <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
Unfortunately, I haven't found a conflict source. I've since downloaded the entire forum to search more thoroughly, but I haven't turned up anything yet.
Jul 16 '08 #9
hsriat
1,654 Recognized Expert Top Contributor
I'm sure you are doing some small mistake somewhere. Do you have any test page so that I may have a look at it?
Jul 17 '08 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

5
12693
by: Martha | last post by:
When I move my mouse over a hyperlink component, the hyperlink does not change color. How do I change the color of a hyperlink when the mouse goes over the hyperlink? or Change the color of a button component when the mouse goes over the button? I am using Microsfot Visual c#.net Version 7.1.3008
2
1805
by: wazoo | last post by:
I'm hoping someone here might help me with this. I'm putting the finishing touches on my intranet web app, and I'm adding some simple JavaScript to my VB.Net Webforms. This works: Button1.Attributes.Add("onmouseover", "this.style.backgroundColor=""Blue""") Button1.Attributes.Add("onmouseout", "this.style.backgroundColor=""Navy""") And this works:
2
2609
by: BobRoyAce | last post by:
I am brand new to ASP.NET and am now required to take over maintenance of a ..NET/C# web application. On one of the pages I'm working on there is a DataGrid which has multiple columns. One of the columns is not databound and instead has up to three hyperlinks in it (Edit, Award, and Cancel). A couple of the hyperlinks should not be shown in certain cases. Now, mind you, I don't know if it's being done in the way that's best to do it. It...
5
2505
by: Patrick.O.Ige | last post by:
I want to have a rollover image on an hyperlink inside a Repeater control but when i run the page i get "Image1 is undefined" Any ideas? I have a Hyperlink and an Image control in a repeater like below:- <ItemTemplate> <tr width="150px" style="cursor:hand" onmouseover="style.backgroundColor='#c0c0c0';" onmouseout="style.backgroundColor=''" bordercolor="#000000">
1
2054
by: mjryan | last post by:
Any idea why this code would not fire? btnMakePmt.Attributes.Add("onMouseOver", "this.src='img\\MakePmt_nav2_over.jpg'") btnMakePmt.Attributes.Add("onMouseOut", "this.src='img\\MakePmt_nav2.jpg'") I have two other Image buttons that this code works fine with. The btnMakePmt is an asp.net hyperlink control. I need this to remain a hyperlink so I can use the Target attribute to display it in a new window instead of the current browser...
8
3789
by: Nathan Sokalski | last post by:
I have several System.Web.UI.WebControls.HyperLink Controls which I want to display as rollover images. I know how to make these manually using the <a> and <img> tags or the <a> tag and a System.Web.UI.WebControls.Image Control or a HyperLink and Image Controls, but the onMouseOver and onMouseOut attributes must be in the <img> tag. If I were to use the HyperLink's ImageUrl property and add the attributes using the...
4
8142
by: Mat | last post by:
How do you modify the color of an hyperlink when your mouse go over it? <asp:HyperLink
2
2673
by: news | last post by:
Hello, I have a webpage with some hyperlink within a button. The problem is that some of my hyperlink is shorter that others and therefore the user must navigate to the hyperlink to click on the link! The thing I want is to make the button more user-friendly (user can click anywhere on the button) and not only on the hyperlink within the button!!!
13
42947
ADezii
by: ADezii | last post by:
Recently, there have been several questions and much confusion concerning the Topic of Hyperlinks. Specifically, Users wanted to know how to retrieve a File Name from a FileDialog Box, copy the Name to a Bound Text Box on a Form, and save the Hyperlink to the underlying Table. The code demos below will do just that: retrieve the Absolute Path of of File from a FileDialog Box, use the Base Name (no extension) as the Display Text for the...
5
4269
by: Silgd1 | last post by:
Hey All.... I am creating web page using Netbeans 6.0. I use A jspf (java server page fragment) that is included in most of the other pages. There are several hyperlinks on the jspf that navigate to other pages. I want to install the ability to onMouseOver the hyperlinks on the jspf to produce submenus that will navigate to other pages. I know that in Netbeans I can go to the properties of the hyperlinks and fill in the javascript in the...
0
8926
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8824
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8603
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8673
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6236
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5703
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4416
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2060
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1815
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.