Welcome to Geeklog, Anonymous Wednesday, October 09 2024 @ 12:48 am EDT
Geeklog Forums
popup logo
Status: offline
trampoline
Forum User
Full Member
Registered: 02/24/06
Posts: 392
I would like a logo that had a pop up action, this is so the logo can be actually read as it is a large image and reduced to logo size it is not legible, also I want the popup to be in 3 seperate languages preferably popping up seperately but all together is ok.
so in short when you hover over the logo a large image of the Logo pops up so you can study it, this is vital for my site.
Any help most apreciated...
so in short when you hover over the logo a large image of the Logo pops up so you can study it, this is vital for my site.
Any help most apreciated...
4
11
Quote
Status: offline
trampoline
Forum User
Full Member
Registered: 02/24/06
Posts: 392
WEll I have some code for a pop up logo, it is CSS but I still do not know how to implement a CSS popup logo into the header.
I have this function / code...
<body class="sitebody" dir="{direction}">
<div id="set_of_links">
<a href="javascript:;"><img src="10.gif" />
<span class="site_1"></span>
</a>
</div><!-- /set_of_links -->
and this CSS code...
/* Logo popup CSS */
div#set_of_links {
position:relative;
padding:9px;
border:1px dotted #999;
background-color:#fff;
margin-bottom:20px
}
div#set_of_links a {
display:inline;
padding:0px 9px 0px 9px;
text-decoration:none;
color:maroon
}
div#set_of_links a:hover {
background:transparent
}
div#set_of_links a span {
display:none
}
div#set_of_links a:hover span {
display:inline;
position:absolute;
top:9px;
left:100px;
width:340px;
height:150px
}
.site_1 {background:url(images/tibetlogo2.gif) no-repeat top left}
.site_2 {background:url(images/b_20.gif) no-repeat top left}
.site_3 {background:url(images/b_60.gif) no-repeat top left}
.site_4 {background:url(images/b_70.gif) no-repeat top left}
So how do I get this into my header which at the moment looks like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{page_title}</title>
<!-- link rel="SHORTCUT ICON" href="{site_url}/favicon.ico" -->
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="{css_url}" title="{theme}">
{feed_url}
{rel_links}
{plg_headercode}
{advanced_editor}
<!-- Load Common Javascript Libraries -->
<script type="text/javascript" src="{site_url}/javascript/common.js"></script>
</head>
<body dir="{direction}">
<div class="header-navigation-container">
<div class="header-navigation-line">
</div>
</div>
<div class="header-logobg-container-outer">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="header-logobg-container-inner">
<tr>
<td class="header-logobg-left">
<a href="{site_url}/"><img src="{site_url}/tibet.jpg" width="100%" height="90" alt="{site_name}" border="0" align="centre"></a>
</td>
<!-- <td class="header-logobg-right">
<span class="site-slogan">{site_slogan}</span>
</td> -->
</tr>
<td colspan="2" style="padding:0px;margin:0px;background:#transparent">{glmenu}</td>
<!-- <td style="padding:0px;margin:0px;background:#406E9B;"><img src="{layout_url}/images/speck.gif" width="900" height="1"></td> -->
</table>
</div>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
{left_blocks}
<td class="story-container" width="100%" style="vertical-align:top;">
<div class="header-welcomeanddate-box">
<div class="header-welcomeanddate-text">
<a href="{site_url}">{welcome_msg}</a><br>{datetime}
</div>
</div>
<!-- START OF CONTENT AREA -->
If anyone can help I would be very greatful.
at the moment I have utilised the LOGO Image for a background image which works very well on the site...
I want the logo to be far left and small in the header and then it will pop out on hover...
http://www.tenanttalk.co.uk
I have this function / code...
Text Formatted Code
<body class="sitebody" dir="{direction}">
<div id="set_of_links">
<a href="javascript:;"><img src="10.gif" />
<span class="site_1"></span>
</a>
</div><!-- /set_of_links -->
and this CSS code...
Text Formatted Code
/* Logo popup CSS */
div#set_of_links {
position:relative;
padding:9px;
border:1px dotted #999;
background-color:#fff;
margin-bottom:20px
}
div#set_of_links a {
display:inline;
padding:0px 9px 0px 9px;
text-decoration:none;
color:maroon
}
div#set_of_links a:hover {
background:transparent
}
div#set_of_links a span {
display:none
}
div#set_of_links a:hover span {
display:inline;
position:absolute;
top:9px;
left:100px;
width:340px;
height:150px
}
.site_1 {background:url(images/tibetlogo2.gif) no-repeat top left}
.site_2 {background:url(images/b_20.gif) no-repeat top left}
.site_3 {background:url(images/b_60.gif) no-repeat top left}
.site_4 {background:url(images/b_70.gif) no-repeat top left}
So how do I get this into my header which at the moment looks like this...
Text Formatted Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{page_title}</title>
<!-- link rel="SHORTCUT ICON" href="{site_url}/favicon.ico" -->
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="{css_url}" title="{theme}">
{feed_url}
{rel_links}
{plg_headercode}
{advanced_editor}
<!-- Load Common Javascript Libraries -->
<script type="text/javascript" src="{site_url}/javascript/common.js"></script>
</head>
<body dir="{direction}">
<div class="header-navigation-container">
<div class="header-navigation-line">
</div>
</div>
<div class="header-logobg-container-outer">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="header-logobg-container-inner">
<tr>
<td class="header-logobg-left">
<a href="{site_url}/"><img src="{site_url}/tibet.jpg" width="100%" height="90" alt="{site_name}" border="0" align="centre"></a>
</td>
<!-- <td class="header-logobg-right">
<span class="site-slogan">{site_slogan}</span>
</td> -->
</tr>
<td colspan="2" style="padding:0px;margin:0px;background:#transparent">{glmenu}</td>
<!-- <td style="padding:0px;margin:0px;background:#406E9B;"><img src="{layout_url}/images/speck.gif" width="900" height="1"></td> -->
</table>
</div>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
{left_blocks}
<td class="story-container" width="100%" style="vertical-align:top;">
<div class="header-welcomeanddate-box">
<div class="header-welcomeanddate-text">
<a href="{site_url}">{welcome_msg}</a><br>{datetime}
</div>
</div>
<!-- START OF CONTENT AREA -->
If anyone can help I would be very greatful.
at the moment I have utilised the LOGO Image for a background image which works very well on the site...
I want the logo to be far left and small in the header and then it will pop out on hover...
http://www.tenanttalk.co.uk
8
8
Quote
All times are EDT. The time is now 12:48 am.
- Normal Topic
- Sticky Topic
- Locked Topic
- New Post
- Sticky Topic W/ New Post
- Locked Topic W/ New Post
- View Anonymous Posts
- Able to post
- Filtered HTML Allowed
- Censored Content