HTML - Magnifying Glass Effect

I want to change images in a specific place by pointing the mouse towards different texts....i.e the the image placed by its side should change whenever i point to a specific text(which will be a hyperlink)

Hi everyone,

I know how to create a rollover effect with an image... but I believe there is a way to change the rollover color and also changing the color of past paged visited..

so lets say we make an href

Quote:
<td width="100%" bgcolor="#669999" align="center" height="63" style="border: 2 outset #FFFFFF" bordercolor="#000000"><b><font face="Arial" size="4"><a href="../Projects.htm">Projects</a></font></b></td>

is there a way to change the color with a rollover, or maybe add a shadow... i am really rusty with my HTML

thank you so much in advance

Mel

I've created a lightbox, i have it set to 100% height & width, but it only does it for the screen size/browser size and not the website.

Basically... lets say 1024x768 is ur screen res, your browser will show about 900px in height. The lightbox covers 900px - but the website has scrollbars and scrolls down to a total of 2000px

Is there a simple way to making my lightbox stretch all the way to the bottom without JS?

Code:

/* MAIN HTML ELEMENTS */
html
{
	xoverflow-y: hidden;
	width: 100%;
	height: 100%;
}
body {
	margin: auto;
	padding: 0px;
	background: #245684;
	width: 100%;
	height: 100%;
	xoverflow-y: hidden;
}
#microSiteContainer {
	background: #000000;
	position: absolute;
	display: none;
	z-index: 100;
	height: 100%;
	width: 100%;
	opacity:0.75;
	filter:alpha(opacity=75);
}

Hi All,

Iv been browsing and browsing the internet to try and figure this one out and sadly i cant find a solution,

Im trying to do a rounded corners effect in CSS for a button and im using IE7(due to where i work) and the rounded corners effect doesnt seem to wanna happen, can anyone tell me or link me to a document on the net that will give me the effect below is the main button you can see i have put a mox border radius and webkit border radius but doesnt seem to work in IE7

HTML Code:

.BtnRaiseTask 
{
	-moz-box-shadow:inset 0px 1px 16px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 16px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8f002b), color-stop(1, #b20939) );
	background:-moz-linear-gradient( center top, #8f002b 5%, #b20939 100% );
	background-color:#8f002b;
	-moz-border-radius:19px;
	-webkit-border-radius:19px;
	border:2px solid #c2c2c2;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:21px;
	font-weight:bold;
	padding:10px 28px;
	text-decoration:none;
	
}

Can some one please help me its driving me insane.

I have made a box mostly from 3 divs a top middle and bottom, when I add any h1 element makes a gap between the top and the middle killing the box effect in FireFox.

I have tried everything with this but now give up, does anyone have any ideas on how to fix this.
I have added a another div called maincontentinner so that the text was easier to adjust but even removing this did not solve it.

All I am trying to do is get rid of the tables layout and have hit a brickwall

my html

HTML Code:

<div class="mainboxtop"></div>
	
			<div class="maincontent">
		 
 
			 <div class="maincontentinner"><!--All content starts here-->
				<h1> More Information</h1>
								this is a test
 			 </div><!--All content stops here-->
	
	
    
	 <div class="mainboxbottom"></div>
	
			
	</div><!--  /closing of maincontentdiv -->

the CSS

Code:

.maincontent {
background:#CFCFCF url(../images/contentmain.gif) repeat scroll 0%;
border:0;
width:710px; 
}
.maincontentinner {/*added to give padding inside the box and a few other styles*/
padding-left:15px;
padding-right:15px;
font-size:1.2em;
}
.mainboxtop {
background:#CFCFCF url(../images/contenttop.gif) no-repeat scroll 0%;
border:0;
height:26px;
margin:0;
padding:0;
width:710px;
}
.mainboxbottom {
background:#CFCFCF url(../images/contentbottom.gif) no-repeat scroll 0%;
border:0;
height:26px;
width:710px;
}

Here's a test page to see it for real

I have an image file


I want to put this on my webpage but the image should look like


Is this some kind of a border applied to the image?

How can I achieve this in HTML?

Hey there,

I've been wresting with this for a while now and figured I'd ask for a bit of help. My website: www.inhollowfalls.com seems to have gained a problem where the div tags are not separeating from each other correctly, specifically the top margins. You can see that the comic frame (which is a background) is in the correct place, but everything else in the area is shifted upwards by the exact amount that the top margins should push them down. I've tried a few things and none worked. Help!

Regards,

Thomas

Hey every one I found this page that wasn't very impressive but there is this cool page transition when you change pages via the interface, the effect that didn't look like flash but some kind of HTML effect could people look it over and give me some idea how it’s done?

The site is:

http://www.pimigop.org/

Thx for the insight.

Peace

John

i use an iframe within in <tr> of table and becuse of this next row or<tr> is not showing if we remove iframe it will then show row so how to rectifiy that problem

I am not an HTML expert. The design program I inherited has a CSS assigned to a "Learn More" button that reads as follows: Code:

#slideshow .learn_more { position: relative; background: url(/graphics/btn-learn_more.png) no-repeat; display: block; height: 27px; text-indent: -9999px; width: 123px; z-index: 2; }
#slideshow .learn_mo hover { background-position: 0 -27px; }

As far as I can tell, it seems what that is doing is showing the top 27 pixels of a built-in "Learn More" graphic, and when you hover over it, it shows the bottom 27 pixels and gives the illusion of a rollover.

My question is, what direct HTML code could I assign to a graphic to duplicate that effect so I can customize my own buttons? For instance, let's say I want the below graphic (which is 242x54, named button.jpg) to link to google.com. What code would I use to create the hover effect I described above?

Hello,

I am trying to achieve something in html that im not sure is possible, but i have been told it is.

If I have a line of text with a link, is it possible when someone clicks the link, the line of text changes out and a new line of text pops up?

for example. if i have this:

<p>hello, please click <a href="#">here</a> to change this text</p>

when the user clicks the link, the line pops out and the following line pops in in its place:

<p>hello, this is the new text, please click <a href="#">here</a> to change back to the old text</p>

Is this possible to do with just html (html5?) and css/javascript? if so, how would i go about doing it?

I appreciate any help.

thank you.

Ben.

edit: i no longer need the text to fade, it just has to swap the lines of code on click.

i think this is an easy one.....
i am using 2 identical spry cluster effects - but two links to two slides
i have problem - the spry slide effect works fine for the first instance - but not for the second instance.
what changes need to be made to the Cluster call to get it to work?!?!

here is a snippet of my source code to reveal the problem....


/////////////////////////////////////////////////////////////////////////////////////////
<!-- WORDSFORMS -->
<Div id="sec1" style="display: none;" class="sec1"><strong>Wordsforms</strong> <br>

<a onClick="cluster.start();"> > <!-- open symbol --> </a>
<div id="first_cluster" class="wordsforms" >
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel
sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros
consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel,
aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis
bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi
in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia,
mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis
pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis,
faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p>
</div>
</div>



<!-- ACTIVATE WORDSFORMS SPRY GROW/HIDE -->
<script type="text/javascript">
var my_cluster = function(element)
{
Spry.Effect.Cluster.call(this, {toggle: true});

this.name = 'my_cluster';
var resize_hor = new Spry.Effect.Size(element, {width:0, height: 0, units:'px'}, {width:350, height: 10, units:'px'}, {duration: 1, toggle: true});
this.addNextEffect(resize_hor);

var resize_ver = new Spry.Effect.Size(element, {width:350, height: 10, units:'px'}, {width:350, height: 230, units:'px'}, {duration: 1, toggle: true});
this.addNextEffect(resize_ver);
}
my_cluster.prototype = new Spry.Effect.Cluster();
my_cluster.prototype.constructor = my_cluster;

var cluster = new my_cluster("first_cluster");
</script>


<!-- GIRLSBOYS -->
<div id="sec2" style="display: none;" class="sec2"><strong>GirlBoys</strong> <br>
<a onClick="cluster.start();"> > <!-- open symbol --></a>
<div id="second_cluster" class="girlsboys" >
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel
sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros
consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel,
aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis
bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi
in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia,
mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis
pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis,
faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p>
</div>
</div>



<!-- ACTIVATE WORDSFORMS SPRY GROW/HIDE -->
<script type="text/javascript">
var my_cluster = function(element)
{
Spry.Effect.Cluster.call(this, {toggle: true});

this.name = 'my_cluster';
var resize_hor = new Spry.Effect.Size(element, {width:0, height: 0, units:'px'}, {width:350, height: 10, units:'px'}, {duration: 1, toggle: true});
this.addNextEffect(resize_hor);

var resize_ver = new Spry.Effect.Size(element, {width:350, height: 10, units:'px'}, {width:350, height: 230, units:'px'}, {duration: 1, toggle: true});
this.addNextEffect(resize_ver);
}
my_cluster.prototype = new Spry.Effect.Cluster();
my_cluster.prototype.constructor = my_cluster;

var cluster = new my_cluster("first_cluster");
</script>

/////////////////////////////////////////////////////////////////////////////////////////


can somebody help?????


ben
www.d-e-p-i-c-t.com

Im making a nav menu for my Wordpress page. I made it with PNG sprite and with some jquery hover effects.

I deliberately made the menu with PNG sprites, because the menu is static, no new categories will be added to it so I figured I'll do it with png.

What I want to do is to make the menu item stay in the hover state after the click - that way the user can see on what part of the website he currently is.

Code:

<ul id="navigation">  
    <li ><a class="aa" href="test1.html"></a></li>  
    <li ><a class="bb" href="test2.html"></a></li>  
    <li ><a class="cc" href="test3.html"></a></li>  
    <li ><a class="dd" href="test4.html"></a></li>  
    <li ><a class="ee" href="test5.html"></a></li> 
    <li ><a class="ff" href="test6.html"></a></li>
    <li ><a class="gg" href="test7.html"></a></li> 
</ul>

Code:

#navigation li a { background-image:url(menu-a.png); display:block; }   

.aa { background-position: 0px 0; height: 38px; width: 108px; margin-left: 16px; }
.bb { background-position: -108px 0; height: 38px; width: 110px; }
.cc { background-position: -218px 0; height: 38px; width: 116px; }
.dd { background-position: -334px 0; height: 38px; width: 158px;}
.ee { background-position: -492px 0; height: 38px; width: 104px; }
.ff { background-position: -595px 0; height: 38px; width: 141px;}
.gg { background-position: -736px 0; height: 38px; width: 78px; }

#navigation a .hover { background:url(menu-a.png) no-repeat; display: block; opacity: 0; position: relative; top: 0px; left: 0;  height: 100%; width: 100%; }  
      
#navigation a.aa .hover { background-position:0px -38px; width:108px; height:38px; }
#navigation a.bb .hover { background-position:-108px -38px; width:110px; height:38px; }
#navigation a.cc .hover { background-position:-218px -38px; width:116px; height:38px; }
#navigation a.dd .hover { background-position:-334px -38px; width:158px; height:38px; }
#navigation a.ee .hover { background-position:-492px -38px; width:104px; height:38px; }
#navigation a.ff .hover { background-position:-595px -38px; width:141px; height:38px; }
#navigation a.gg .hover { background-position:-736px -38px; width:78px; height:38px; }

This is as far as I've got. The menu works, hovers correctly etc. But how do I make the hover effect for "aa" stay active when the visitor lands on test1.html page, "bb" for test2.html etc.?

Thanks!

I started a new project recently, nothing too original but fun for me, please take a look:

http://katyannekad.blogspot.com/

I'd like the most recently posted photo to be added to the end of the list every time I update, rather than the beginning. And would like to disable the shadow effect that you can see when hovering over one of the photo thumbnails.

I downloaded a template so not sure if it's the kind of thing where I can just add a code in or if some bits of the template need to be altered.

Thanks.