Any option to zoom or make text bigger when mouse over to a text in the blog sec 
Author: Ionescu C.
Visited 1184,
Followers 2,
Shared 0
Hello,
Is there any option to zoom or make text bigger/smaller when mouse over (hover) to a text in the blog section?
In the HTML part you can put the effects or add a button, in the blog what animation can be used?
Regards,
Cristi
Posted on the
Hello Ionescu,
Here a long code which is works.. Save it into html file and test it
<html>
<style type="text/css">
span {font-size: x-small}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function convertPreBlocks() {}
var regular = "x-small";
function bigger(thing){
thing.style.fontSize = "large";
siblingElement = thing.previousSibling;
while(siblingElement) {
if(siblingElement.tagName=="SPAN") {
siblingElement.style.fontSize = "medium";
break;
}
siblingElement = siblingElement.previousSibling;
}
siblingElement = thing.nextSibling;
while(siblingElement) {
if(siblingElement.tagName=="SPAN") {
siblingElement.style.fontSize = "medium";
break;
}
siblingElement = siblingElement.nextSibling;
}
}
function normal(thing){
thing.style.fontSize = regular;
siblingElement = thing.previousSibling;
while(siblingElement) {
if(siblingElement.tagName=="SPAN") {
siblingElement.style.fontSize = regular;
break;
}
siblingElement = siblingElement.previousSibling;
}
siblingElement = thing.nextSibling;
while(siblingElement) {
if(siblingElement.tagName=="SPAN") {
siblingElement.style.fontSize = regular;
break;
}
siblingElement = siblingElement.nextSibling;
}
}
// End -->
</script>
</HEAD>
<BODY>
Passez la souris sur les phrases ci-dessous<br />
<br /><br />
<span onmouseover="bigger(this)" onmouseout="normal(this)">Mais il y a, tout au long des marchés de Provence</span><br/>
<span onmouseover="bigger(this)" onmouseout="normal(this)">Tant de filles jolies, tant de filles jolies</span><br/>
<span onmouseover="bigger(this)" onmouseout="normal(this)">Qu'au milieu des fenouils, melons et céleris</span><br/>
<span onmouseover="bigger(this)" onmouseout="normal(this)">J'ai bien de temps en temps quelques idées qui dansent</span><br/>
<span onmouseover="bigger(this)" onmouseout="normal(this)">Voyageur de la nuit, moi qui en ribambelle</span><br/>
<span onmouseover="bigger(this)" onmouseout="normal(this)">Ai croisé des regards que je ne voyais pas</span><br/>
<span onmouseover="bigger(this)" onmouseout="normal(this)">J'ai hâte au point du jour de trouver sur mes pas</span><br/>
<span onmouseover="bigger(this)" onmouseout="normal(this)">Ces filles du soleil qui rient et qui m'appellent</span><br/>
<span onmouseover="bigger(this)" onmouseout="normal(this)">Le matin au marché</span><br/>
<span onmouseover="bigger(this)" onmouseout="normal(this)">Paroles: Louis Amade. Musique: Gilbert Bécaud</span><br/>
</html>
Enjoy.
Axel
Author
Hello Alex,
I'm talking about the text that goes into an article that is it published in the Blog section, where unfortunatly you can't go into Properties > "expert mode" to add the code that you gave me.
Regards,
Cristi
Grrrr. I am not using blog part. I don't know how to in this case.
You can set the
html code "on" and then use code like this :
<p nMouseOver="this.style.fontSize='30px'" onMouseOut="this.style.fontSize='15px'" >Hello folks</p>
I hope you have discovered the typo.
<p nMouseOver should have been <p onMouseOver
You can also have a link in the code if needed.
... LINK BLOG ...?...
ciao
.
Author
Hello John S. I have tried with the code provided but it not the actioned needed.
I only want one word and an animation for that specific word, with the p - parameter the word will be placed on the next paragraph.
@KolAsim - link to the blog is:
http://focsanii.ro/IulianaPopa/blog/index.php?burnout-ul-parental
I have attach a snip with the text that I need to put the animation.
The word in yellow, I want to animate: zoom in - zoom out, move sideways some kind oa nimation, but only that specific word not the whole phrase.
Regards,
Cristi
@Ionescu: if you like you can also try this way
Go into the the map and choose the special page of your blog then select property tab and put this code before closing head tag:
<style>
div[id^="imBlogPost_"] div:hover, div[id^="imBlogPost_"] div:hover::first-line {
font-size: 20pt !important;
}
</style>
Customize the strong value.
<style>
div[id^="imBlogPost_"] div:hover, div[id^="imBlogPost_"] div:hover::first-line, div[id^="imBlogPost_"] span:hover {
font-size: 20pt !important;
}
</style>
(It > En) ... I thought you needed the code for the paragraphs, so it's easier ...
... to not do the carriage return, use this string of code:
<span onMouseOver="this.style.fontSize='24px'" onMouseOut="this.style.fontSize='14px'" > TEXT </span>
.
ciao
.
It should function.
Take a look here: http://eksempelsite.dk/churches/blog/index.php?third-post
But maybe you meant something different?
oh - Sorry - I did not read the text well. Use span instead of p
oncus <span style='color:white;' onMouseOver="this.style.fontSize='30px'" onMouseOut="this.style.fontSize='15px'" >Hello folks</span> metu
Author
Thank you all for the answers provided.
It is working.
But there is something weird if I change the font from the app to ROBOT for example, size 14, for the text, for somereason it is not working anymore.
This is the code used:
<DIV align="center"><b>text before bla bla bla <span style='color:orange;' onMouseOver="this.style.fontSize='30px'" onMouseOut="this.style.fontSize='15px'" >text that changes size</span>!</b></DIV>
Regards,
Cristi
<span style='color:orange;font-family:roboto' onMouseOver="this.style.fontSize='24px'" onMouseOut="this.style.fontSize='14px'" > TEXT </span>
ciao