The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS: Hover over text - Image popup, CSS: Hover over text - Image popup
GMag
post Jan 13 2016, 09:32 AM
Post #1





Group: Members
Posts: 2
Joined: 13-January 16
Member No.: 23,902



Hi Folks,
I have found some examples online of how to code this but I cannot get it working. Im not coding a standard web page but in an editor using macros. So I have CSS Stylesheet macro, HTML Image, HTML Body macro, etc.

I have a link to a page. I want to use this link as a preview so when the user hovers over the link more information will be provided in form of a popup image!

Would you guys be able to help me with this??

Thanks,
GMag
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 13 2016, 01:39 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You need to show your stuff.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
GMag
post Jan 14 2016, 10:21 AM
Post #3





Group: Members
Posts: 2
Joined: 13-January 16
Member No.: 23,902



QUOTE(pandy @ Jan 13 2016, 01:39 PM) *

You need to show your stuff.



I found this hover feature (http://www.wickham43.net/hoverpopups.php) :

The styles in the head section style tags of this page (which should preferably be in a separate stylesheet) are:-

#tooltip1 { position: relative; }
#tooltip1 a span { display: none; color: #FFFFFF; }
#tooltip1 a:hover span { display: block; position: absolute; width: 200px; background: #aaa url(images/horses200x50.jpg); height: 50px; left: 100px; top: -10px; color: #FFFFFF; padding: 0 5px; }
The html markup is:-

<p id="tooltip1"><a href="introduction.php">Introduction<span>Introduction to HTML and CSS: tooltip with extra text</span></a></p>

**********************

Im using WIKI Markup for most of it but I cannot seem to get this working. Is there anyone experienced with working with WIKIs. I can't provide you with the web URL atm.

Would really appreciate some help with this.

GMag
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 14 2016, 10:47 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Then it isn't possible for us to help you. We can't guess what's wrong.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 14 2016, 11:58 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You should be looking in the tutorial.css at that url.
What you need starts at line 615.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 15 2016, 03:40 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



What CMag posted should work fine. Something is different in the Wiki page or there's a conflict with other style sheets.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 15 2016, 05:13 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Maybe, I have't tried. I simply inspected the Home link on the page he/she posted.

Wait a minute. It's the third example at that page that uses the posted CSS. So, that should indeed work.

We'll see when GMag posts back. Although I don't quite understand the editor and its macros he/she talks about.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:46 PM